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

生徒

「Next.jsでページごとに違うレイアウトを作ることはできますか？」

先生

「もちろんできます。Next.jsのPages Routerを使えば、ページごとに個別のレイアウトを簡単に設定できます。」

生徒

「具体的にはどうやってやるんですか？」

先生

「実際にコードを見ながら、順を追って説明しましょう。」

1. Next.js Pages Routerとは？

Next.jsにはPages Routerという仕組みがあり、ファイルごとにURLとページを自動で対応させることができます。たとえば、pages/about.jsというファイルを作ると、ブラウザで/aboutにアクセスしたときにそのページが表示されます。

このPages Routerの特徴は、ページごとにレイアウトを柔軟に変えられることです。共通のヘッダーやフッターを持たせつつ、ページごとに違うデザインやサイドバーを追加することが可能です。

2. 基本のレイアウトコンポーネントを作ろう

まずは全ページで共通して使えるレイアウトコンポーネントを作ります。


import React from "react";

export default function Layout({ children }) {
  return (
    <div>
      <header>
        <h1>サイトのヘッダー</h1>
      </header>
      <main>{children}</main>
      <footer>サイトのフッター</footer>
    </div>
  );
}

（このレイアウトを使うと、ヘッダーとフッターは全ページ共通で表示されます）

3. ページごとにレイアウトを変更する方法

ページごとに異なるレイアウトを作るには、各ページファイルで使用するレイアウトコンポーネントを切り替えます。


import Layout from "../components/Layout";
import SpecialLayout from "../components/SpecialLayout";

export default function AboutPage() {
  const useSpecial = true; // 条件に応じてレイアウトを変更

  const PageLayout = useSpecial ? SpecialLayout : Layout;

  return (
    <PageLayout>
      <h2>Aboutページの内容</h2>
      <p>このページは特別なレイアウトが適用されています。</p>
    </PageLayout>
  );
}

（条件に応じて異なるレイアウトをページに適用できます）

4. ページ固有のサイドバーを追加する

ページによってサイドバーを変えたい場合も、同じようにレイアウトを切り替えます。サイドバー用コンポーネントを作り、レイアウトに渡します。


function Sidebar({ items }) {
  return (
    <aside>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </aside>
  );
}

export default function BlogPage() {
  return (
    <Layout>
      <Sidebar items={["記事一覧", "人気記事", "カテゴリー"]} />
      <h2>ブログページの本文</h2>
    </Layout>
  );
}

（ページごとに異なるサイドバーを表示できます）

5. ページごとにCSSを変える方法

Next.jsではページごとにCSSファイルを分けることもできます。たとえば、about.module.cssを作成してAboutページ専用のスタイルを適用できます。


import styles from "../styles/about.module.css";

export default function AboutPage() {
  return (
    <div className={styles.container}>
      <h2>Aboutページの見た目を変更</h2>
    </div>
  );
}

（CSSモジュールを使うとページごとのスタイルを簡単に分けられます）

6. レイアウトに動的なタイトルを設定する

Next.jsではページごとに動的なタイトルやメタ情報も設定できます。next/headを使うと便利です。


import Head from "next/head";
import Layout from "../components/Layout";

export default function ContactPage() {
  return (
    <Layout>
      <Head>
        <title>お問い合わせページ</title>
      </Head>
      <h2>お問い合わせ</h2>
    </Layout>
  );
}

（ページごとにブラウザのタイトルを変更できます）

7. ページごとにフッターやヘッダーを変える

場合によってはヘッダーやフッターもページごとに変えたいことがあります。そんな時はレイアウトコンポーネントにpropsで条件を渡します。


function Layout({ children, headerText, footerText }) {
  return (
    <div>
      <header>{headerText}</header>
      <main>{children}</main>
      <footer>{footerText}</footer>
    </div>
  );
}

export default function HomePage() {
  return (
    <Layout headerText="ホームページヘッダー" footerText="ホームフッター">
      <h2>ホームページの内容</h2>
    </Layout>
  );
}

（propsを使えばページごとにヘッダーやフッターをカスタマイズできます）

8. まとめるとPages Routerでのページレイアウト

Next.jsのPages Routerを使うと、以下のことが簡単にできます。

全ページ共通のレイアウトを作成
ページごとに異なるレイアウトを切り替え
サイドバーやヘッダー、フッターをページごとに変更
CSSやメタ情報もページごとに設定可能

これにより、サイト全体の統一感を保ちながら、ページごとの個性も表現できます。Next.js Pages Routerは初心者でも柔軟にページ設計ができる便利な機能です。

まとめ

今回の記事では、Next.jsのPages Routerを活用して、ページごとに異なるレイアウトを簡単に実現する方法について詳しく解説しました。Pages RouterはファイルベースでURLとページを紐付ける仕組みであり、各ページの独自レイアウトやCSS、メタ情報、ヘッダー・フッター・サイドバーなどの個別カスタマイズを柔軟に行えます。これにより、ウェブサイト全体の統一感を保ちながら、ページごとの個性やデザインの差別化も容易に行えるようになります。

記事で紹介した方法を順番に振り返ると、まず共通レイアウトを作成し、それをベースにページごとに条件分岐やpropsを活用して異なるレイアウトを適用する手法が基本です。さらに、サイドバーやフッター、ヘッダーをページごとに変えることで、ユーザー体験を向上させることができます。CSSモジュールやnext/headを組み合わせることで、ページ専用のスタイルや動的タイトル、メタ情報も管理でき、SEOやユーザビリティにも貢献します。

具体的には、レイアウトコンポーネントを作成して共通部分をまとめ、必要に応じてページごとの特殊レイアウトをインポートして切り替える形です。また、サイドバーの内容やヘッダー・フッターのテキストをpropsで渡すことで、ページごとの柔軟なカスタマイズが可能です。この手法は、ブログやECサイト、企業サイトなど、さまざまなウェブサイトで活用できます。

さらに、Next.jsではファイルベースのルーティングにより、ページを追加するだけで自動的にURLが生成されるため、初心者でも直感的にページ管理ができます。加えて、条件付きレンダリングやpropsの活用によって、特定のページだけ特別なレイアウトやスタイルを簡単に適用できるのも大きな利点です。結果として、開発効率を落とさずに、見た目や機能の多様性を保つことが可能になります。

サンプルコードを活用することで、初学者でも具体的にレイアウトを作りながら学べます。例えば以下のように、共通レイアウトにページ固有のヘッダーやフッターを渡すことができます。


import Layout from "../components/Layout";

export default function SamplePage() {
  return (
    <Layout headerText="サンプルページヘッダー" footerText="サンプルフッター">
      <h2>サンプルページの本文</h2>
      <p>このようにして、ページごとにヘッダーやフッターを簡単に変えられます。</p>
    </Layout>
  );
}

（画面に「サンプルページの本文」と表示され、ヘッダーとフッターはページ固有の内容に変わります）

また、サイドバーの内容をページごとに切り替えたい場合も、以下のようにitemsをpropsで渡すだけで簡単に変更可能です。


function Sidebar({ items }) {
  return (
    <aside>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </aside>
  );
}

export default function AnotherPage() {
  return (
    <Layout>
      <Sidebar items={["最新記事", "人気記事", "カテゴリー"]} />
      <h2>Anotherページの本文</h2>
    </Layout>
  );
}

（ページごとにサイドバーの内容を簡単に変えられます）

CSSモジュールを使えば、ページ専用のデザインも簡単に分けることができます。例えばabout.module.cssを作成し、Aboutページだけに適用することで、他ページに影響を与えずにスタイル変更が可能です。これにより、サイト全体の統一感を損なうことなく、ページごとのデザインを最適化できます。

このように、Next.js Pages Routerを活用すると、サイトの規模や用途に応じて柔軟かつ効率的にページレイアウトを構築でき、開発者にとって非常に便利な機能となります。これからウェブ開発を始める初心者にとっても、ファイルベースのルーティングとレイアウト管理の組み合わせは学習しやすく、応用もしやすい構造です。

先生と生徒の振り返り会話

生徒

「まとめると、Next.js Pages Routerを使うと全ページ共通のレイアウトだけでなく、ページごとの個別レイアウトやCSSも簡単に管理できるということですね？」

先生

「その通りです。Pages Routerを使えば、ヘッダーやフッター、サイドバーもページごとに変えられますし、CSSモジュールで見た目も自由に調整できます。」

生徒

「propsを使えば、ページごとの条件に応じてレイアウトを切り替えられるのも便利ですね。」

先生

「そうですね。これにより、ブログやECサイト、企業サイトなど、どんなウェブサイトでもページごとに個性を出しながら統一感を保てます。」

生徒

「なるほど、ページごとにレイアウトを柔軟に変えられるのがNext.js Pages Routerの最大の強みなんですね。」

先生