プロジェクト構造と編成

このページでは、Next.jsにおけるフォルダとファイルの規則の概要と、プロジェクトを整理するためのヒントを提供します。

フォルダとファイルの規則

トップレベルフォルダ

トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。

トップレベルファイル

トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、監視ツールの統合、環境変数の定義などに使用されます。

ルーティングファイル

ネストされたルート

動的ルート

ルートグループとプライベートフォルダ

並列ルートとインターセプトルート

メタデータファイルの規則

アプリアイコン

Open GraphとTwitter画像

SEO

コンポーネント階層

ルートセグメントの特殊ファイルで定義されたReactコンポーネントは、特定の階層でレンダリングされます：

• layout.js
• template.js
• error.js（Reactエラー境界）
• loading.js（Reactサスペンス境界）
• not-found.js（Reactエラー境界）
• page.jsまたはネストされたlayout.js

ネストされたルートでは、セグメントのコンポーネントは親セグメントのコンポーネントの内部にネストされます。

プロジェクトの整理

フォルダとファイルの規則以外に、Next.jsはプロジェクトファイルの整理と配置について特定の意見を持っていません。しかし、プロジェクトの整理を助けるためのいくつかの機能を提供しています。

コロケーション（併置）

appディレクトリでは、ネストされたフォルダがルート構造を定義します。各フォルダはルートセグメントを表し、URLパス内の対応するセグメントにマッピングされます。

しかし、ルート構造はフォルダを通じて定義されますが、ルートセグメントにpage.jsまたはroute.jsファイルが追加されるまで、ルートは公開アクセス可能ではありません。

また、ルートが公開アクセス可能になった場合でも、page.jsまたはroute.jsによって返されるコンテンツのみがクライアントに送信されます。

これは、プロジェクトファイルを誤ってルーティング可能にすることなく、appディレクトリ内のルートセグメント内に安全に併置できることを意味します。

補足:

• プロジェクトファイルをapp内に併置できますが、必ずしもそうする必要はありません。必要に応じて、appディレクトリの外部にプロジェクトファイルを保存することもできます。

プライベートフォルダ

フォルダ名の先頭にアンダースコアを付けることで、プライベートフォルダを作成できます：_folderName

これは、そのフォルダが非公開の実装詳細であり、ルーティングシステムによって考慮されるべきではないことを示し、そのフォルダとそのすべてのサブフォルダをルーティングから除外します。

appディレクトリ内のファイルはデフォルトで安全に併置できるため、併置のためにプライベートフォルダは必須ではありません。しかし、次のような用途に役立ちます：

• UIロジックとルーティングロジックの分離。
• プロジェクト全体とNext.jsエコシステム全体で内部ファイルを一貫して整理する。
• コードエディタでのファイルの並べ替えとグループ化。
• 将来のNext.jsファイル規則との潜在的な命名の競合を回避する。

補足:

• フレームワークの規則ではありませんが、同じアンダースコアパターンを使用して、プライベートフォルダ外のファイルを「プライベート」としてマークすることも検討できます。
• フォルダ名を%5F（アンダースコアのURL変換形式）で始めることで、アンダースコアで始まるURLセグメントを作成できます：%5FfolderName。
• プライベートフォルダを使用しない場合は、予期しない命名の競合を防ぐためにNext.jsの特殊ファイル規則を知っておくと役立ちます。

ルートグループ

フォルダを括弧で囲むことでルートグループを作成できます：(folderName)

これは、フォルダが整理目的のものであり、ルートのURLパスに含めるべきではないことを示します。

ルートグループは次のような用途に役立ちます：

• ルートをグループに整理する（サイトのセクション、意図、チームなどによって）。
• 同じルートセグメントレベルでネストされたレイアウトを有効にする：
  • 同じセグメントに複数のネストされたレイアウトを作成する（複数のルートレイアウトを含む）
  • 共通セグメント内の一部のルートにレイアウトを追加する

src ディレクトリ

Next.jsは、アプリケーションコード（appを含む）をオプションのsrcディレクトリ内に保存することをサポートしています。これにより、アプリケーションコードとプロジェクトのルートに配置されるプロジェクト設定ファイルが分離されます。

一般的な戦略

以下のセクションでは、一般的な戦略の非常に概要的な説明を提供します。最も簡単な結論は、自分とチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。

補足：以下の例では、componentsとlibフォルダを一般化されたプレースホルダとして使用しています。これらの命名にはフレームワーク上の特別な意味はなく、プロジェクトによってはui、utils、hooks、stylesなどの他のフォルダを使用することもあります。

プロジェクトファイルをappの外部に保存する

この戦略では、すべてのアプリケーションコードをプロジェクトのルートにある共有フォルダに保存し、appディレクトリを純粋にルーティング目的のために保持します。

プロジェクトファイルをapp内のトップレベルフォルダに保存する

この戦略では、すべてのアプリケーションコードを**appディレクトリのルート**にある共有フォルダに保存します。

プロジェクトファイルを機能またはルートによって分割する

この戦略では、グローバルに共有されるアプリケーションコードをルートのappディレクトリに保存し、より特定のアプリケーションコードをそれらを使用するルートセグメントに分割します。