Next.jsでShared UIを整理するLayoutとTemplateの使い方！初心者向けNext.jsディレクトリ構成解説

1. Next.jsでLayoutを作るメリット

1. Next.jsでLayoutを作るメリット

Next.jsでは複数のページで同じHeaderやFooter、ナビゲーションを使うことがよくあります。毎回同じコードを書くとミスが増えたり、修正が大変です。Layoutを使うと共通部分を1か所で管理でき、メンテナンスが楽になります。

2. ディレクトリ構成の基本例

2. ディレクトリ構成の基本例

Next.jsのShared UIを整理する基本的なディレクトリ構成の例です。

/app
  /layout
    MainLayout.jsx
  /components
    Header.jsx
    Footer.jsx
  /pages
    index.jsx
    about.jsx

この構成では、HeaderやFooterなどの共通部分はcomponentsにまとめ、MainLayoutでページ全体の構造を定義しています。

3. Layoutの作り方

3. Layoutの作り方

Layoutは関数コンポーネントとして作ります。以下はシンプルなMainLayoutの例です。

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

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

4. ページでLayoutを使う方法

4. ページでLayoutを使う方法

作ったLayoutをページで使うには、以下のようにchildrenをラップします。

import MainLayout from "../layout/MainLayout";

export default function HomePage() {
  return (
    <MainLayout>
      <h1>ホームページへようこそ</h1>
      <p>Next.jsでLayoutを使う基本の例です。</p>
    </MainLayout>
  );
}

5. Templateの使い方

5. Templateの使い方

TemplateはLayoutを使ったページの雛形として作ります。Templateを作ることで、特定のページの構成を再利用しやすくなります。

import MainLayout from "../layout/MainLayout";

export default function AboutTemplate({ title, content }) {
  return (
    <MainLayout>
      <h2>{title}</h2>
      <p>{content}</p>
    </MainLayout>
  );
}

6. Templateをページに適用する例

6. Templateをページに適用する例

import AboutTemplate from "../layout/AboutTemplate";

export default function AboutPage() {
  return (
    <AboutTemplate
      title="私たちについて"
      content="Next.jsのLayoutとTemplateを使うと共通UIを簡単に管理できます"
    />
  );
}

7. 複数Layoutを使い分ける方法

7. 複数Layoutを使い分ける方法

Next.jsではサイトの一部で別のLayoutを使うことも可能です。例えば管理者用ページと一般ユーザー用ページでLayoutを分けます。

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

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

8. まとめとしての使い方のポイント

8. まとめとしての使い方のポイント

Next.jsでLayoutとTemplateを使うと、共通UIを1か所で管理でき、コードの重複を減らせます。複数ページで同じデザインを使う場合に非常に便利です。ディレクトリはcomponentsとlayoutを分けることで整理しやすくなります。

また、Templateを作ることでページごとに変更する部分だけを簡単に差し替えられ、開発効率が向上します。複雑なサイトでもLayoutとTemplateを組み合わせることで保守性が高くなります。

まとめ

まとめ

本記事ではNext.jsでのShared UI管理におけるLayoutとTemplateの使い方について詳しく解説しました。Next.jsはReactベースのフレームワークであり、複数ページを持つウェブサイトやアプリケーションの開発に非常に便利です。特に共通部分であるHeaderやFooter、ナビゲーションメニューなどを毎ページで個別に実装すると、コードの重複や保守性の低下、修正時のミスなどが発生しやすくなります。そこでLayoutとTemplateを活用することで、共通部分を一か所でまとめて管理できるだけでなく、ページごとの変更箇所を明確に分離して効率的に開発できます。

Layoutはページ全体の骨組みとしてHeader、Footer、サイドバーなどの共通UIをまとめるコンポーネントです。Reactコンポーネントとして関数形式で作成し、childrenプロパティで個別ページの内容を挿入します。これにより、共通UIの修正が必要になった場合もLayoutを修正するだけで全ページに反映されるため、開発の効率化と保守性向上に直結します。

TemplateはLayoutを利用したページ雛形として機能します。Templateを作成することで、タイトルや本文などページごとに変わる部分だけをpropsで渡して簡単に複数ページを作成できます。これにより、似た構成のページを迅速に作成でき、再利用性を高めることができます。Templateを活用することで、例えばAboutページやContactページ、商品詳細ページなど、内容が異なるが構造は共通のページを効率的に生成できます。

また、Next.jsでは複数のLayoutを使い分けることも可能です。例えば一般ユーザー向けのページと管理者専用のページで異なるLayoutを適用すれば、表示内容やUIを柔軟に変更できます。AdminLayoutを作り、専用のHeaderを設置しつつFooterなど共通部分を維持することで、サイト全体の統一感を保ちながら特定ページに個別デザインを適用できます。

ディレクトリ構成としては、componentsフォルダにHeaderやFooterなどの再利用可能なコンポーネントを配置し、layoutフォルダに各LayoutやTemplateをまとめるのが基本です。このように分離しておくことで、コードの見通しが良くなり、開発者がどこに何があるかを直感的に把握できます。ページフォルダにはLayoutやTemplateをラップした個別ページコンポーネントを配置することで、構造が明確でメンテナンスしやすいディレクトリ構成になります。

さらに、Reactの関数コンポーネントであるLayoutやTemplateは、StateやHooksを組み合わせることも容易です。例えば、ヘッダーにログイン情報を表示したり、テーマ切替ボタンを配置する場合もLayoutに実装すれば全ページに適用されます。Templateを使えば、ページ固有の機能や動作を個別に実装しつつ、共通UIはLayoutに委ねることで、コードの重複を避けながら柔軟なページ構成が可能です。

実際にNext.jsでLayoutとTemplateを使ったサンプルコードを振り返ると、MainLayout.jsxでHeaderとFooterを共通化し、childrenでページごとの内容を表示しています。AboutTemplate.jsxではMainLayoutを利用し、タイトルや本文をpropsとして渡すだけで複数ページを簡単に生成できます。さらにHomePage.jsxやAboutPage.jsxでは、それぞれMainLayoutやTemplateをラップすることで、共通UIと個別内容が明確に分離されています。

import MainLayout from "../layout/MainLayout";

export default function HomePage() {
  return (
    <MainLayout>
      <h1>ホームページへようこそ</h1>
      <p>Next.jsでLayoutを使う基本の例です。</p>
    </MainLayout>
  );
}

import AboutTemplate from "../layout/AboutTemplate";

export default function AboutPage() {
  return (
    <AboutTemplate
      title="私たちについて"
      content="Next.jsのLayoutとTemplateを使うと共通UIを簡単に管理できます"
    />
  );
}

このようにNext.jsでLayoutとTemplateを組み合わせることで、ページごとの内容と共通UIの分離、再利用性の向上、保守性の向上が実現できます。複数ページを持つウェブサイトや管理画面、ブログ、ECサイトなどの開発でも大変有効な手法です。