先生と生徒の会話形式で理解しよう

生徒

「Next.jsのApp Routerって、毎回同じヘッダーを書く必要があるんですか？」

先生

「同じUIを何度も書かなくて大丈夫です。layout.tsxを使えば共有できます。」

生徒

「layout.tsxって、どんな役割なんですか？」

先生

「画面の共通部分をまとめるための仕組みです。順番に見ていきましょう。」

1. Next.js App Routerとは何か

Next.jsのApp Routerとは、画面の構成をフォルダ単位で管理する新しい仕組みです。パソコン初心者の方は、フォルダを「引き出し」、ファイルを「書類」と考えてください。 App Routerでは、引き出しの場所によって、表示される画面が自動的に決まります。この仕組みにより、ページごとの管理がとても簡単になります。

2. layout.tsxの役割をイメージしよう

layout.tsxは、すべてのページで共通して使うUIをまとめるファイルです。たとえば、学校の校舎で考えると、廊下や階段はどの教室でも共通ですよね。 layout.tsxは、その廊下や階段のような存在です。ヘッダー、フッター、メニューなどを一度書くだけで、複数のページに反映されます。

3. 最小構成のlayout.tsxを書いてみよう

まずは一番シンプルなlayout.tsxを見てみましょう。このファイルは、appフォルダの直下に置きます。


export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        {children}
      </body>
    </html>
  );
}

（各ページの内容が、bodyの中に表示されます）

4. ヘッダーとフッターを共有する例

次は、ヘッダーとフッターを追加した例です。どのページを開いても、同じ見た目になります。


export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <header>
          <h1>サンプルサイト</h1>
        </header>

        <main>
          {children}
        </main>

        <footer>
          <p>© 2026 Sample</p>
        </footer>
      </body>
    </html>
  );
}

（画面の上にタイトル、下にフッターが常に表示されます）

5. フォルダごとにlayout.tsxを分ける考え方

App Routerでは、フォルダごとにlayout.tsxを作れます。これは、建物の中でフロアごとに内装が違うイメージです。たとえば、管理画面だけ別のデザインにしたい場合に便利です。


export default function AdminLayout({ children }) {
  return (
    <div>
      <nav>管理メニュー</nav>
      <section>{children}</section>
    </div>
  );
}

（管理画面だけ専用メニューが表示されます）

6. childrenとは何を意味しているのか

childrenとは、layout.tsxの中に差し込まれるページ本体のことです。難しく聞こえますが、「あとから入る中身」と覚えてください。空のお弁当箱に、おかずを入れるようなイメージです。各ページの内容が、自動的にchildrenとして渡されます。

7. page.tsxとlayout.tsxの関係

page.tsxは、実際の画面内容を書くファイルです。 layout.tsxは、その外側を包む枠の役割を持っています。封筒と手紙で考えると、layout.tsxが封筒、page.tsxが手紙です。この関係を理解すると、画面構成が一気にわかりやすくなります。


export default function Page() {
  return <p>これはトップページです</p>;
}

（共通レイアウトの中に文章が表示されます）

8. layout.tsxを使うと何が楽になるのか

layout.tsxを使う最大のメリットは、修正が一か所で済むことです。もしヘッダーの文字を変えたい場合、layout.tsxだけ直せば大丈夫です。何十ページも同じ修正をする必要がなくなり、ミスも減ります。初心者の方ほど、この便利さを早めに知っておくと安心です。

Next.js App Routerでlayout.tsxを使う方法を完全ガイド！初心者でもわかるUIの共有