1. Next.jsのappディレクトリとは何か

Next.jsのappディレクトリとは、Webサイトの画面構成やページ遷移を管理するための場所です。パソコン初心者の方は、appディレクトリを「お店の設計図が入ったファイルケース」とイメージすると分かりやすいです。 Next.jsでは、このディレクトリの中にファイルを置くだけで、自動的にページとして認識されます。 App RouterはNext.js 13以降で使える新しい仕組みで、より直感的に画面を作れるのが特徴です。

2. appディレクトリの基本構造

appディレクトリの中には、ページを表示するための決まった名前のファイルがあります。代表的なのが page.js や layout.js です。フォルダ構成がそのままURL構造になるため、初心者でも迷いにくい設計になっています。フォルダは「住所」、ファイルは「その場所にある部屋」と考えると理解しやすいでしょう。

3. page.tsx（page.js）の役割

pageファイルは、実際に画面に表示される内容を書く場所です。ここに書いたコードが、そのURLにアクセスしたときの画面になります。 Reactコンポーネントという仕組みを使いますが、最初は「画面の中身を書く箱」だと思って問題ありません。


export default function Page() {
  return (
    <div>
      <h1>トップページ</h1>
      <p>これはappディレクトリのpageです。</p>
    </div>
  );
}

（画面に「トップページ」という見出しと説明文が表示されます）

4. layout.tsx（layout.js）の役割

layoutファイルは、複数のページで共通して使う枠組みを定義します。ヘッダーやフッターなど、毎回同じ見た目になる部分をまとめて書けます。家で例えるなら、壁や床のような「共通の土台」です。


export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

（すべてのページにヘッダーとフッターが表示されます）

5. フォルダとURLの関係

appディレクトリでは、フォルダ名がそのままURLになります。例えば app/blog/page.tsx を作ると、/blog というURLでアクセスできます。難しい設定をしなくても、フォルダを作るだけでページが増えるのがNext.jsの強みです。


export default function BlogPage() {
  return <h1>ブログページ</h1>;
}

（/blog にアクセスすると「ブログページ」と表示されます）

6. loading.tsxで読み込み中を表示する

loadingファイルは、ページの表示に時間がかかるときに使います。読み込み中の画面を出すことで、利用者が待たされていることを理解できます。これは「今準備中です」という看板を出すようなものです。


export default function Loading() {
  return <p>読み込み中です...</p>;
}

（ページ表示前に「読み込み中です...」と表示されます）

7. error.tsxでエラー画面を用意する

errorファイルは、何か問題が起きたときに表示される画面です。何も設定しないと難しいエラー画面になりますが、初心者向けのメッセージに変えられます。トラブル時の案内係として覚えておくと安心です。


"use client";

export default function Error() {
  return <p>エラーが発生しました。</p>;
}

（エラー時に分かりやすいメッセージが表示されます）

8. appディレクトリを使うメリット

appディレクトリを使うことで、ページ構成が分かりやすくなります。 URLとフォルダ構造が一致するため、迷子になりにくいのが大きな利点です。また、共通レイアウトや読み込み表示を簡単に作れるため、実務でもよく使われています。初心者がNext.jsを学ぶなら、まずappディレクトリを理解することが重要です。