プロジェクト構成とファイル配置
Next.jsは、ルーティングフォルダとファイルの規約以外では、プロジェクトファイルをどのように構成および配置するかについて特に意見を持っていません。
このページでは、プロジェクトを構成するために利用できるデフォルトの動作と機能を共有します。
デフォルトで安全な配置
appディレクトリ内のネストされたフォルダ階層は、ルート構造を定義します。
各フォルダは、URLパス内の対応するセグメントにマッピングされるルートセグメントを表します。
しかし、フォルダを通じてルート構造が定義されているにもかかわらず、page.jsまたはroute.jsファイルがルートセグメントに追加されるまで、ルートは公開されません。
そして、ルートが公開されるようになったとしても、クライアントに送信されるのはpage.jsまたはroute.jsによって返されたコンテンツのみです。
つまり、プロジェクトファイルはappディレクトリ内のルートセグメントに安全に配置でき、誤ってルートになることはありません。
Good to know:
- これは
pagesディレクトリとは異なります。pages内のファイルはすべてルートとみなされます。- プロジェクトファイルを
appに配置することができますが、必ずしも配置する必要はありません。必要であれば、それらをappディレクトリの外に保管することもできます。
プロジェクト構成機能
Next.jsは、プロジェクトの構成を助けるためにいくつかの機能を提供します。
Private Folders
フォルダ名の前にアンダースコアを付けることで、プライベートフォルダを作成できます：_folderName
これは、フォルダがプライベートで実装の詳細であり、ルーティングシステムによって考慮されるべきではないことを示し、ルーティングからフォルダおよびそのすべてのサブフォルダを除外します。
appディレクトリ内のファイルはデフォルトで安全に配置できるので、配置のためにプライベートフォル ダは必須ではありません。しかし、プライベートフォルダは以下に役立ちます：
- UIロジックをルーティングロジックから分離する
- プロジェクトとNext.jsエコシステム全体で内部ファイルを一貫して整理する
- コードエディタの中でファイルをソートおよびグループ化する
- 将来のNext.jsファイル規約との命名の競合を避ける
Good to know:
- フレームワークの規約ではありませんが、プライベートフォルダ外のファイルにも同じアンダースコアパターンを使用して「プライベート」としてマークすることを考慮するかもしれません。
- フォルダ名の前に%5F（アンダースコアのURLエンコード形式）を付けることで、アンダースコアから始まるURLセグメントを作成できます：
%5FfolderName。- プライベートフォルダを使用しない場合、驚くべき命名の競合を防ぐためにNext.jsの特別なファイル規約を知っておくと便利でしょう。
Route Groups
フォルダを括弧で囲んでRoute Groupsを作成できます：(folderName)
これは、フォルダが組織のためのものであり、ルートのURLパスに含まれるべきではないことを示します。
Route Groupsは以下に役立ちます：
- ルートをグループに整理（サイトのセクション、目的、またはチームによって整理する場合など）
- 同じルートセグメントレベルでネストされたレイアウトを有効にする：
- 同じセグメントで複数のネストされたレイアウト、複数のrootレイアウトを作成するCreating multiple nested layouts in the same segment, including multiple root layouts
- 共通セグメントのルートのサブセットにレイアウトを追加するAdding a layout to a subset of routes in a common segment
src ディレクトリ
Next.jsは、アプリケーションコード（appを含む）をオプションのsrcディレクトリに保存することをサポートしています。これにより、プロジェクトの設定ファイルが主にプロジェクトのルートに存在するのと区別されます。
モジュールパスエイリアス
Next.jsはモジュールパスエイリアスをサポートしており、深くネストされたプロジェクトファイル間でのインポートを読みやすく維持しやすくします。
// 変更前
import { Button } from '../../../components/button'
// 変更後
import { Button } from '@/components/button'
プロジェクト構成戦略
Next.jsプロ ジェクトでファイルとフォルダを整理する際に「正解」や「間違い」はありません。
次のセクションでは一般的な戦略について非常に高いレベルでの概要を示します。一番簡単なポイントは、自分やチームに合った戦略を選び、それをプロジェクト全体で一貫させることです。
Good to know: 以下の例では、特別なフレームワークの意味はなく、あなたのプロジェクトでは
ui、utils、hooks、stylesなど、他のフォルダを使用することもありますが、componentsとlibフォルダを一般的なプレースホルダーとして使用しています。
プロジェクトファイルをappの外に保存する
この戦略は、すべてのアプリケーションコードをプロジェクトのルートにある共有フォルダに保存し、appディレクトリを純粋にルーティング目的のために保持します。
app内の トップレベルフォルダにプロジェクトファイルを保存する
この戦略は、すべてのアプリケーションコードをappディレクトリのルートにある共有フォルダに保存します。
機能またはルートごとにプロジェクトファイルを分割する
この戦略は、グローバルに共有されるアプリケーションコードをrootのappディレクトリに保存し、より具体的なアプリケーションコードをそれらを使用するルートセグメントに分割します。
