NextJs: インデックスページ専用レイアウトファイルの作成方法

Next.js のレイアウトとルート グループ化を理解する

Next.js では、アプリ ディレクトリはアプリケーションのルーティングとレイアウト構造の基盤として機能します。通常、このディレクトリ内には、layout.jsx ファイルと page.jsx ファイルがあります。

ルートレイアウト (app/layout.jsx)
目的: アプリフォルダーのルートにあるlayout.jsxは、ルートレイアウトとして機能します。これは、特に指定しない限り、このレイアウト内でレンダリングされるすべてのページ (子コンポーネント) がすべてのルートに適用されることを意味します。

ホームページ専用レイアウト
場合によっては、ルート ページまたはインデックス ページ (/) に、グローバル レイアウトとは異なる独自の特定のレイアウトを持たせたい場合があります。ルート グループ化を使用してこれを実現する方法は次のとおりです。

*解決策: * ルート グループ化を使用する
Next.js のルート グループ化を使用すると、URL 構造に影響を与えない方法でルートを整理できます。実装方法は次のとおりです:

ディレクトリ構造:

app
├── layout.jsx         # Root layout for all pages
└── (home)
    ├── layout.jsx     # Dedicated layout for the root ('/') page
    ├── page.jsx       # The index or root page

*実装の詳細: *
フォルダーの名前付け: ルート グループ化用であることを示すには、フォルダー名を括弧 () で囲みます。この場合、(home) は URL パスを変更しません。このページには引き続き「/」からアクセスできます。
ファイルの移動: page.jsx を (ホーム) フォルダーに移動し、このページ専用の特定のレイアウト用にこのフォルダー内にlayout.jsx を作成します。

*これを行うことで: *

グローバル レイアウト (app/layout.jsx) は、「/」を除く他のすべてのルートに適用されます。
専用レイアウト (app/(home)/layout.jsx) はルート パスにのみ適用され、ホームページのみに独自のスタイルや動作が可能になります。

*特典: *

モジュール性: 各ルートまたはルートのグループのエクスペリエンスを個別に調整できます。
SEO と UX: さまざまなレイアウトにより、SEO を最適化したり、特定のページでのユーザー エクスペリエンスを向上させることができます。

*考慮事項: *

ルーティングの問題を避けるために、ルート グループの命名規則 (かっこを使用) が厳密に従っていることを確認してください。

このアプローチにより、ディレクトリ構造をクリーンに保つだけでなく、URL パスに影響を与えることなく、サイトの各セグメントが独自の個性や構造を持つことができる柔軟な設計が可能になります。

特定のユースケースに基づいて、これをさらに自由に調整してください。

以上がNextJs: インデックスページ専用レイアウトファイルの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。