App Router と Route Group を使用した Next.js での複数のレイアウトの管理-jsチュートリアル-php.cn

App Router と Route Group を使用した Next.js での複数のレイアウトの管理

Mary-Kate Olsen

リリース： 2025-01-17 02:34:11

オリジナル

565 人が閲覧しました

Managing Multiple Layouts in Next.js with App Router and Route Groups

Next.js 13 では、レイアウト、エラー境界、読み込みインジケーターなど、いくつかの魅力的な機能を備えた App Router が導入されました。ただし、一部の開発者は、同じルートレベルで複数のレイアウトを管理するときに課題に直面します。以下では、そのようなシナリオでクリーンで便利なレイアウトを構築および維持するための最良の方法を示します。

ステップ 1: ルートレイアウトを作成する (オプション)

ルートレイアウトは、アプリ全体のグローバルコンポーネントまたはコンテキストプロバイダーを定義するのに役立ちます。ただし、アプリにグローバル構成が必要ない場合は、この手順をスキップできます。

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <RootProviders>
          {children}
        </RootProviders>
      </body>
    </html>
  );
}

ログイン後にコピー

ステップ 2: 特定のルートグループのレイアウトを定義する

/home ページと /contact ページにヘッダーとフッターが必要だとします。これを実現するには、Next.js ルートグループを使用します。

たとえば、(マーケティング) というルートグループを作成し、その中にページを配置します。 app/(marketing)/home/page.tsx や app/(marketing)/contact/page.tsx などのページは、app/(marketing)/layout.tsx レイアウトを使用します。

// app/(marketing)/layout.tsx

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <Header />
      <main>{children}</main>
      <Footer />
    </Providers>
  );
}

ログイン後にコピー

ステップ 3: 他のルートグループのレイアウトを作成する

同様に、/policy や /tos などのページの場合、(legal) という新しいルートグループを作成し、それに特定のレイアウトを定義できます。

// app/(legal)/layout.tsx

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="container mx-auto">{children}</main>
    </>
  );
}

ログイン後にコピー

主な利点

このアプローチを使用すると、次のことが可能になります。

同じレベルのルートの複数のレイアウトを維持します。
プロジェクト構造をクリーンで整理された状態に保ちます。
特定のレイアウトに Google Analytics などの特定の機能を実装します。たとえば、特に /policy や /tos などのページの LegalLayout 内に分析追跡を追加できます。

Next.js では、ルートグループ と レイアウト を活用することで、アプリケーション用のモジュール式でスケーラブルで保守可能なアーキテクチャを作成できます。

以上がApp Router と Route Group を使用した Next.js での複数のレイアウトの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。