プロジェクトの構成とファイルの配置

ルーティングフォルダとファイルの規約とは別に、Next.jsはプロジェクトファイルの構成と配置について**意見がありません**。

このページでは、デフォルトの動作と、プロジェクトを構成するために使用できる機能について説明します。

• デフォルトでの安全な配置
• プロジェクト構成機能
• プロジェクト構成戦略

デフォルトでの安全な配置

appディレクトリでは、ネストされたフォルダ階層によってルート構造が定義されます。

各フォルダは、URLパスの対応するセグメントにマップされるルートセグメントを表します。

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

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

つまり、**プロジェクトファイル**はappディレクトリのルートセグメント内に**安全に配置**でき、誤ってルーティングされることはありません。

知っておくと良いこと:

• これは、pagesディレクトリとは異なります。pagesディレクトリ内のファイルはすべてルートと見なされます。
• プロジェクトファイルをappに配置することは**できます**が、**する必要はありません**。必要に応じて、appディレクトリの外部に保持することもできます。

プロジェクト構成機能

Next.jsは、プロジェクトの構成に役立ついくつかの機能を提供しています。

プライベートフォルダ

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

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

appディレクトリ内のファイルはデフォルトで安全に配置できるため、配置にはプライベートフォルダは必要ありません。ただし、これらは以下のような場合に役立ちます。

• UIロジックとルーティングロジックの分離。
• プロジェクト全体とNext.jsエコシステム全体で内部ファイルを常に構成する。
• コードエディタでファイルをソートしてグループ化する。
• 将来のNext.jsファイル規約との潜在的な名前の競合を回避する。

知っておくと良いこと:

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

ルートグループ

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

これは、フォルダが組織的な目的のためのものであり、ルートのURLパスに**含めない**ことを示します。

ルートグループは、以下のような場合に役立ちます。

• ルートをグループに整理する 例えば、サイトセクション、目的、またはチームごと。
• 同じルートセグメントレベルでネストされたレイアウトを有効にする
  • 同じセグメントに複数のネストされたレイアウトを作成する（複数のルートレイアウトを含む）
  • 共通セグメント内のルートのサブセットにレイアウトを追加する

src ディレクトリ

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

モジュールパスエイリアス

Next.js は、深くネストされたプロジェクトファイル間でのインポートの読みやすさと保守を容易にするモジュールパスエイリアスをサポートしています。

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

プロジェクトの構成戦略

Next.jsプロジェクトでファイルやフォルダを整理する際に、「正しい」やり方や「間違った」やり方はありません。

次のセクションでは、一般的な戦略の概要を非常に高いレベルで示します。最も重要なのは、自分とチームにとって効果的な戦略を選択し、プロジェクト全体で一貫性を保つことです。

重要な点: 以下の例では、componentsフォルダとlibフォルダを一般的なプレースホルダーとして使用しています。これらの名前には、フレームワーク固有の意味はなく、プロジェクトではui、utils、hooks、stylesなどの他のフォルダを使用する場合があります。

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

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

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

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

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

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