Next.jsのレイアウト機能で効率的に画面管理！共通部分をスッキリまとめる方法

こんにちは、とまだです。

みなさん、Next.jsでヘッダーやフッターを毎回コピペしていませんか？

「また同じコード書いてる...」って思ったこと、ありますよね。

実は、Next.jsには「レイアウト機能」という便利な仕組みがあるんです。

今回は、この機能を使って画面の共通部分をスッキリ管理する方法を解説します。

レイアウト機能とは？

簡単に言うと、家の間取りみたいなものです。

どの部屋にも共通してあるもの、例えば天井や床、壁。 これらを毎回作るのは大変ですよね。

同じように、Webサイトでも全ページ共通の部分があります。 ヘッダー、フッター、サイドバーなどです。

レイアウト機能を使えば、これらを一箇所で管理できるんです。

なぜレイアウト機能を使うの？

1. 同じコードを何度も書かなくて済む

例えば、10ページあるサイトで全部にヘッダーを書くとします。 それぞれに同じコードをコピペするのは面倒ですよね。

レイアウトを使えば、1回書くだけでOKです。

2. 修正が楽になる

ヘッダーのデザインを変えたいとき。 レイアウトがなければ、10ページ全部修正が必要です。

でも、レイアウトを使っていれば？ 1箇所直すだけで全ページに反映されます。

3. チーム開発がスムーズに

デザイナーさんはレイアウト部分を担当。 エンジニアは各ページの機能を担当。

こんな風に役割分担しやすくなります。

基本的な使い方

まず、プロジェクトの構成を見てみましょう。

my-next-app/
├─ pages/
│   ├─ index.js
│   ├─ about.js
│   └─ contact.js
├─ components/
│   ├─ Header.js
│   └─ Footer.js
└─ layouts/
    └─ MainLayout.js

layoutsフォルダを作って、その中にレイアウトファイルを置きます。

レイアウトファイルの作り方

次に、MainLayout.jsの中身を見てみましょう。

import Header from "../components/Header";
import Footer from "../components/Footer";

export default function MainLayout({ children }) {
  return (
    <div>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </div>
  );
}

childrenには各ページの内容が入ります。 まるで額縁に絵を入れるような感じですね。

ページでの使い方

各ページでは、このレイアウトを使うだけです。

import MainLayout from "../layouts/MainLayout";

export default function Home() {
  return (
    <MainLayout>
      <h1>ホームページです</h1>
      <p>ここがメインコンテンツです。</p>
    </MainLayout>
  );
}

これで、ヘッダーとフッターが自動的に表示されます。

複数のレイアウトを使い分ける

「管理画面だけ違うデザインにしたい」

そんなときもありますよね。

管理画面用レイアウトを作る

管理画面専用のレイアウトを作ってみましょう。

import AdminNav from "../components/AdminNav";

export default function AdminLayout({ children }) {
  return (
    <div>
      <AdminNav />
      <main>
        {children}
      </main>
    </div>
  );
}

管理画面用のナビゲーションだけを表示します。 フッターは不要なので入れていません。

使い分けの実装

管理画面では、このレイアウトを使います。

import AdminLayout from "../layouts/AdminLayout";

export default function Dashboard() {
  return (
    <AdminLayout>
      <h2>ダッシュボード</h2>
      <p>管理画面のコンテンツです。</p>
    </AdminLayout>
  );
}

これで、ページごとに適切なレイアウトを使い分けられます。

SSRやCSRとの組み合わせ

Next.jsの特徴であるSSRやCSR。 レイアウトと組み合わせるとどうなるでしょうか。

SSR（サーバーサイドレンダリング）の場合

サーバー側でページを作って送ります。 レイアウトも含めて完成形がブラウザに届きます。

つまり、最初から統一感のある画面が表示されるんです。 SEO対策にも有利ですね。

CSR（クライアントサイドレンダリング）の場合

ブラウザ側でページを組み立てます。 レイアウト部分は再利用されるので、ページ遷移が速くなります。

まるで、部屋を移動するだけの感覚です。 家全体を建て直す必要はありません。

よくある活用シーン

レイアウト機能が特に便利な場面をご紹介します。

ブログサイト

記事ページが100個あっても大丈夫。 ヘッダー、フッター、サイドバーは共通です。

新しい記事を追加するときも楽ちんです。 レイアウトを使うだけで、デザインが統一されます。

会員制サービス

ログインユーザーと未ログインユーザー。 表示するメニューが違いますよね。

レイアウトで条件分岐すれば、簡単に切り替えられます。

ECサイト

商品ページ、カート、マイページ。 それぞれ微妙にレイアウトが違うことがあります。

複数のレイアウトを用意して使い分ければOKです。

気をつけたいポイント

レイアウトを使うときの注意点もあります。

詰め込みすぎない

レイアウトに機能を詰め込みすぎると複雑になります。 見た目の管理に集中しましょう。

ビジネスロジックは各ページに任せる。 これが基本です。

コンポーネントは適切に分割する

ヘッダーやフッターは別ファイルに。 レイアウトファイルが大きくなりすぎないようにします。

小さく分けることで、管理しやすくなります。

テストを忘れずに

レイアウトが壊れると全ページに影響します。 だから、テストは特に重要です。

レイアウトが正しく表示されるかチェックしましょう。

実装パターンまとめ

よく使われるパターンを整理してみました。

用途に応じて使い分けてみてください。

• 基本レイアウト：全ページ共通のUI管理に使います
• サブレイアウト：特定ページ用の特別なUIに使います
• 認証レイアウト：ログイン状態の管理を含むレイアウトです
• 階層レイアウト：大規模サイトでセクションごとに分けます

それぞれに向き不向きがあります。 プロジェクトに合わせて選びましょう。

まとめ

Next.jsのレイアウト機能、いかがでしたか？

共通部分をまとめて管理できる。 修正も一箇所で済む。 チーム開発もスムーズになる。

メリットがたくさんありますね。

最初は少し難しく感じるかもしれません。 でも、一度作ってしまえば後が楽になります。

まずは簡単なヘッダーとフッターから始めてみてください。 きっと、その便利さを実感できるはずです。

次のプロジェクトでは、ぜひレイアウト機能を活用してみてくださいね。