Project Organization and File Colocation
ルーティングフォルダーとファイルの規約以外では、Next.js はプロジェクトのファイルをどのように整理し、配置するかについては何も主張していません。
このページでは、プロジェクトを整理するために使用できる default の動作と機能を共有します。
Safe colocation by default
appディレクトリ内で、nested folder hierarchy は route の構造を定義しています。
各フォルダーは、URL path 内の対応するセグメントにマップされる route セグメントを表現しています。
しかし、route の構造がフォルダーを通じて定義されていても、page.js もしくは route.js ファイルが route セグメントに追加されるまで、その route は公開アクセス可能ではありません。
そして、たとえ route が公開アクセス可能になったとしても、page.jsまたはroute.jsによって返されるコンテンツのみが client に送信されます。
これは、プロジェクトファイルが appディレクトリ内の route セグメント内に安全に共有配置されても、誤ってルーティング可能になることなく、つまり、偶然ルーティングされることがないことを意味します。
Good to know:
- これは
pagesディレクトリとは異なり、pages内の任意のファイルは route と見なされます。- あなたのプロジェクトファイルを
appに共存させることができますが、必ずしもそうしなければならないわけではありません。もし好みであれば、appディレクトリの外に保管することもできます。
Project organization features
Next.js は、プロジェクトの整理に役立ついくつかの機能を提供します。
プライベートフォルダ
プライベートフォルダは、フォルダにアンダースコアを付けることで作成できます：_folderName
これはフォルダがプライベートな実装詳細であり、ルーティングシステムによって考慮されるべきではないことを示しています。したがって、opting the folder and all its subfoldersをルーティングから除外します。
appディレクトリ内のファイルは、default で安全に共存できますため、共有のためのプライベートフォルダは必要ありません。ただし、以下の場合に役立つことがあります：
- UI ロジックをルーティングロジックから分離する。
- プロジェクト全体で一貫して内部ファイルを整理し、Next.js エコシステムを適応させる。
- code エディターでファイルを整理し、グループ化する。
- 将来の Next.js ファイル規約との潜在的な命名の競合を回避します。
Good to know
- フレームワークの規約ではないものの、プライベートフォルダー以外のファイルを同じアンダースコアのパターンを使用して"private"とマークすることも検討するかもしれません。
- フォルダ名の前に
%5F（アンダースコアの URL エンコード形式）を付けることで、アンダースコアで start する URL セグメントを作成できます:%5FfolderName.- あなたがプライベートフォルダーを使用しない場合、予期しない命名の競合を防ぐために、Next.js 特別なファイル規約を理解しておくと役立ちます。
Route グループ
(folderName)という括弧でフォルダを囲むことにより、Route グループを作成することができます。
これは、フォルダが組織的な目的のためのものであり、ルートの URL path には含まれてはならないことを示しています。
Route groups are useful for:
- routes をグループに編成する 例えば、サイトセクション、意図、またはチームごとに。
- 同じ route セグメントレベルでネストされた Layout を可能にする:
src ディレクトリ
Next.js は、オプショナルな src directory 内にアプリケーションの code(appを含む) を保存することをサポートしています。これにより、アプリケーションの code を、主にプロジェクト root にあるプロジェクトの設定ファイルと分離することができます。
モジュール Path エイリアス
Next.js は、深くネストされたプロジェクトファイル全体でのインポートを読みやすく、維持しやすくするモジュール Path エイリアスをサポートしています。
// before
import { Button } from '../../../components/button'
// after
import { Button } from '@/components/button'
Project organization strategies
Next.js プロジェクトにおいて、自分のファイルやフォルダを整理する際に「正しい」や「間違った」方法は存在しません。
次のセクションでは、一般的な戦略の非常に高レベルの概要をリスト化しています。最もシンプルな要点は、あなたとあなたのチームに適した strategy を選び、プロジェクト全体で一貫性を保つことです。
Good to know:以下の例では、
componentsやlibといったフォルダーを一般的なプレースホルダーとして使用していますが、その名称は特別なフレームワークの意味はありません。あなたのプロジェクトでは、他にui、utils、hooks、stylesなどのフォルダーを使用するかもしれません。
appの外部にプロジェクトファイルを保存する
この strategy は、すべてのアプリケーションの code をプロジェクトのroot内の共有フォルダに保存し、appディレクトリはルーティング目的専用に保持します。
app内のトップレベルのフォルダにプロジェクトファイルを保存する
この strategy は、すべてのアプリケーション code を app ディレクトリの root にある共有フォルダに保存します。
機能または route ごとにプロジェクトファイルを分割
この strategy は、グローバルに共有されるアプリケーションの code をappディレクトリの root に保存し、より具体的なアプリケーションの code をそれを使用する route のセグメントに分割します。
