プロジェクト構成とファイルの同居配置
ルーティングフォルダとファイルの規約を除いて、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ファイル規約との名前衝突を避ける
知っておくと良いこと
- フレームワークの規約ではありませんが、プライベートフォルダ外のファイルにも同じアンダースコアパターンを使用して「プライベート」とマークすることも検討できます。
- フォルダ名の前に
%5F（アンダースコアのURLエンコード形式）を付けることで、アンダースコアで始まるURLセグメントを作成できます:%5FfolderName- プライベートフォルダを使用しない場合、Next.jsの特別なファイル規約を知っておくと、予期しない名前の衝突を防ぐのに役立ちます。
ルートグループ
フォルダを括弧で囲むことでルートグループを作成できます: (folderName)
これはフォルダが整理目的であり、ルートのURLパスに含まれないことを示します。
ルートグループは以下の場合に便利です:
- URLパスに影響を与えずにルートをグループ化する（サイトセクション、意図、チームごとなど）
- 同じルートセグメントレベルでネストされたレイアウトを有効にする:
srcディレクトリ
Next.jsはアプリケーションコード（appを含む）をオプションのsrcディレクトリ内に保存することをサポートしています。これにより、アプリケーションコードとプロジェクトのルートに存在する設定ファイルを分離できます。
モジュールパスエイリアス
Next.jsはモジュールパスエイリアスをサポートしており、深くネストされたプロジェクトファイル間のインポートを読みやすく、保守しやすくします。
// 変更前
import { Button } from '../../../components/button'
// 変更後
import { Button } from '@/components/button'プロジェクト構成戦略
Next.jsプロジェクトでファイルやフォルダを整理する方法に「正しい」も「間違い」もありません。
以下のセクションでは、一般的な戦略の非常に高レベルの概要を紹介します。最もシンプルなポイントは、あなたとチームにとって機能する戦略を選択し、プロジェクト全体で一貫性を保つことです。
知っておくと良いこと: 以下の例では、
componentsやlibフォルダを一般的なプレースホルダーとして使用しています。これらの名前には特別なフレームワークの意味はなく、プロジェクトによってはui、utils、hooks、stylesなどの他のフォルダを使用する場合もあります。
プロジェクトファイルをappの外に保存する
この戦略では、すべてのアプリケーションコードをプロジェクトルートの共有フォルダに保存し、appディレクトリは純粋にルーティング目的のために保持します。
プロジェクトファイルをapp内のトップレベルフォルダに保存する
この戦略では、すべてのアプリケーションコードをappディレクトリのルートにある共有フォルダに保存します。
機能やルートごとにプロジェクトファイルを分割する
この戦略では、グローバルに共有されるアプリケーションコードをappディレクトリのルートに保存し、より具体的なアプリケーションコードをそれらを使用するルートセグメントに分割します。
