Next.jsの複数階層Layoutで大規模UIを構築する方法｜初心者でもわかるNext.jsレイアウト設計
生徒
「Next.jsって、ページごとに見た目を変えるのは大変じゃないですか？」
先生
「Next.jsにはLayoutという仕組みがあって、共通の見た目をまとめられます。」
生徒
「ページが増えても管理しやすくなるんですか？」
先生
「はい。さらに複数階層のLayoutを使えば、大規模な画面構成も整理できます。」
1. Next.jsのLayoutとは何か？
Next.jsのLayoutとは、複数のページで共通して使う画面の枠組みのことです。 たとえば、ヘッダーやフッター、サイドメニューなど、どのページにも表示したい部分をまとめて管理できます。 現実世界で例えると、家の間取りのようなものです。部屋ごとに家具は違っても、玄関や廊下は共通ですよね。 Layoutは、その共通部分を一か所にまとめる役割を持っています。
2. appディレクトリとLayoutの基本構造
Next.jsでは、appディレクトリを使って画面構成を管理します。 appの中に置いたlayout.tsxやlayout.jsxは、その階層以下のページすべてに適用されます。 フォルダ構造がそのまま画面の構造になるので、初心者でも直感的に理解しやすいのが特徴です。
export default function RootLayout({ children }) {
return (
<html>
<body>
<header>共通ヘッダー</header>
{children}
<footer>共通フッター</footer>
</body>
</html>
);
}
3. 複数階層Layoutの考え方
複数階層Layoutとは、フォルダごとに異なるLayoutを持たせる設計方法です。 たとえば、管理画面と一般ユーザー画面で見た目を分けたい場合に便利です。 建物で言うと、1階と2階で内装が違うイメージです。
4. フォルダごとにLayoutを分ける方法
app/dashboard/layout.tsxのように、フォルダの中にLayoutを置くことで、 そのフォルダ専用の見た目を作れます。
export default function DashboardLayout({ children }) {
return (
<div className="dashboard">
<aside>サイドメニュー</aside>
<main>{children}</main>
</div>
);
}
5. 親Layoutと子Layoutの関係
複数階層Layoutでは、親のLayoutの中に子のLayoutが重なって表示されます。 つまり、外側から順番に包み込まれる仕組みです。 箱の中に箱を入れるようなイメージを持つと理解しやすくなります。
export default function Page() {
return <h1>ダッシュボードトップ</h1>;
}
6. Templateとの違いを理解する
Next.jsにはLayoutと似た機能としてTemplateがあります。 Layoutは画面遷移しても状態が保持されますが、 Templateはページが切り替わるたびに初期化されます。 フォームやアニメーションのリセットが必要な場合に使われます。
export default function Template({ children }) {
return <div>{children}</div>;
}
7. 大規模UIで複数階層Layoutを使うメリット
大規模なUIでは、画面数が増えるほど管理が難しくなります。 複数階層Layoutを使うことで、共通部分と個別部分を明確に分けられます。 その結果、修正箇所が少なくなり、作業ミスも減らせます。
8. 初心者がつまずきやすいポイント
初心者がよく混乱するのは、どのLayoutがどこに適用されているか分からなくなる点です。 その場合は、フォルダ構成を紙に書き出して整理すると理解しやすくなります。 無理に複雑な構成にせず、小さく分けて考えることが大切です。
