プロジェクト構成とファイルのコロケーション
ルーティングフォルダとファイルの規約を除けば、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ルートディレクトリに保存し、より特定のアプリケーションコードをそれらを使用するルートセグメントに分割します。
