プロジェクト構成とファイルの配置
ルーティングのフォルダとファイルの規則以外、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はモジュールパスエイリアスをサポートしており、深くネストされたプロジェクトファイル間のインポートの読み取りと保守を容易にします。
// 以前
import { Button } from '../../../components/button'
// 現在
import { Button } from '@/components/button'プロジェクト構成戦略
Next.jsプロジェクトでファイルとフォルダを整理する「正しい」または「間違った」方法はありません。
以下のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も単純な結論は、自分とチームに適した戦略を選択し、プロジェクト全体で一貫性を保つことです。
補足: 以下の例では、
componentsとlibフォルダを一般化されたプレースホルダーとして使用しています。その命名には特別なフレームワークの意味はなく、プロジェクトではui、utils、hooks、stylesなどの他のフォルダを使用する場合があります。
appディレクトリ外にプロジェクトファイルを保存
このアプローチでは、すべてのアプリケーションコードをプロジェクトのルートにある共有フォルダに保存し、appディレクトリをルーティング目的のみに使用します。
app内のトップレベルフォルダにプロジェクトファイルを保存
このアプローチでは、すべてのアプリケーションコードをappディレクトリのルートにある共有フォルダに保存します。
機能またはルートによるプロジェクトファイルの分割
このアプローチでは、グローバルに共有されるアプリケーションコードをappディレクトリのルートに保存し、より具体的なアプリケーションコードをそれらを使用するルートセグメントに分割します。