プロジェクトの構造と構成

このページでは、Next.jsにおけるすべてのフォルダとファイルの規約、およびプロジェクトを整理するための推奨事項について概要を説明します。

フォルダとファイルの規約

トップレベルフォルダ

トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。


`app`	App Router
`pages`	Pages Router
`public`	配信される静的アセット
`src`	オプションのアプリケーションソースフォルダ

トップレベルファイル

トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、監視ツールの統合、環境変数の定義に使用されます。


Next.js
`next.config.js`	Next.jsの設定ファイル
`package.json`	プロジェクトの依存関係とスクリプト
`instrumentation.ts`	OpenTelemetryおよびインストルメンテーションファイル
`middleware.ts`	Next.jsリクエストミドルウェア
`.env`	環境変数
`.env.local`	ローカル環境変数
`.env.production`	本番環境変数
`.env.development`	開発環境変数
`.eslintrc.json`	ESLintの設定ファイル
`.gitignore`	無視するGitファイルとフォルダ
`next-env.d.ts`	Next.js用TypeScript宣言ファイル
`tsconfig.json`	TypeScriptの設定ファイル
`jsconfig.json`	JavaScriptの設定ファイル

ルーティングファイル


`layout`	`.js` `.jsx` `.tsx`	レイアウト
`page`	`.js` `.jsx` `.tsx`	ページ
`loading`	`.js` `.jsx` `.tsx`	ローディングUI
`not-found`	`.js` `.jsx` `.tsx`	Not Found UI
`error`	`.js` `.jsx` `.tsx`	エラーUI
`global-error`	`.js` `.jsx` `.tsx`	グローバルエラーUI
`route`	`.js` `.ts`	APIエンドポイント
`template`	`.js` `.jsx` `.tsx`	再レンダリングされるレイアウト
`default`	`.js` `.jsx` `.tsx`	並列ルーティングのフォールバックページ

ネストされたルーティング


`folder`	ルートセグメント
`folder/folder`	ネストされたルートセグメント

動的ルーティング


`[folder]`	動的ルートセグメント
`[...folder]`	キャッチオールルートセグメント
`[[...folder]]`	オプションのキャッチオールルートセグメント

ルーティンググループとプライベートフォルダ


`(folder)`	ルーティングに影響を与えずにルーティングをグループ化
`_folder`	フォルダとそのすべての子セグメントをルーティングから除外する

並列およびインターセプトルーティング


`@folder`	名前付きスロット
`(.)folder`	同レベルをインターセプト
`(..)folder`	1つ上のレベルをインターセプト
`(..)(..)folder`	2つ上のレベルをインターセプト
`(...)folder`	ルートからインターセプト

メタデータファイルの規約

アプリのアイコン


`favicon`	`.ico`	ファビコンファイル
`icon`	`.ico` `.jpg` `.jpeg` `.png` `.svg`	アプリのアイコンファイル
`icon`	`.js` `.ts` `.tsx`	生成されたアプリのアイコン
`apple-icon`	`.jpg` `.jpeg`, `.png`	Appleアプリのアイコンファイル
`apple-icon`	`.js` `.ts` `.tsx`	生成されたAppleアプリのアイコン

Open GraphとTwitter画像


`opengraph-image`	`.jpg` `.jpeg` `.png` `.gif`	Open Graph画像ファイル
`opengraph-image`	`.js` `.ts` `.tsx`	生成されたOpen Graph画像
`twitter-image`	`.jpg` `.jpeg` `.png` `.gif`	Twitter画像ファイル
`twitter-image`	`.js` `.ts` `.tsx`	生成されたTwitter画像

SEO


`sitemap`	`.xml`	サイトマップファイル
`sitemap`	`.js` `.ts`	生成されたサイトマップ
`robots`	`.txt`	Robotsファイル
`robots`	`.js` `.ts`	生成されたRobotsファイル

プロジェクトの整理

Next.jsはプロジェクトファイルの整理やコロケーション（共存）方法について特に意見を持ちません。しかし、プロジェクトを整理するのに役立ついくつかの機能を提供します。

コンポーネント階層

特殊ファイルで定義されたコンポーネントは、特定の階層でレンダリングされます

layout.js
template.js
error.js (Reactエラー境界)
loading.js (Reactサスペンス境界)
not-found.js (Reactエラー境界)
page.js またはネストされた layout.js

Component Hierarchy for File Conventions

コンポーネントはネストされたルーティングで再帰的にレンダリングされます。これは、ルーティングセグメントのコンポーネントが親セグメントのコンポーネントの内側にネストされることを意味します。

Nested File Conventions Component Hierarchy

コロケーション (共存)

`app` ディレクトリでは、ネストされたフォルダがルーティング構造を定義します。各フォルダは、URLパス内の対応するセグメントにマッピングされるルートセグメントを表します。

しかし、ルーティング構造がフォルダを通じて定義されているにもかかわらず、ルートセグメントに `page.js` または `route.js` ファイルが追加されるまで、ルーティングは公開アクセス可能になりません。

A diagram showing how a route is not publicly accessible until a page.js or route.js file is added to a route segment.

そして、ルーティングが公開アクセス可能になった場合でも、`page.js` または `route.js` によって返されるコンテンツのみがクライアントに送信されます。

A diagram showing how page.js and route.js files make routes publicly accessible.

これは、プロジェクトファイルを`app`ディレクトリ内のルートセグメント内に誤ってルーティング可能になることなく、安全にコロケート（共存）できることを意味します。

A diagram showing colocated project files are not routable even when a segment contains a page.js or route.js file.

知っておくと良いこと: `app`内にプロジェクトファイルをコロケートすることはできますが、必須ではありません。もしよろしければ、`app`ディレクトリの外に置いておくことも可能です。

プライベートフォルダ

プライベートフォルダは、フォルダ名の先頭にアンダースコアを付けることで作成できます: _folderName

これは、そのフォルダがプライベートな実装詳細であり、ルーティングシステムによって考慮されるべきではないことを示し、それによってそのフォルダとすべてのサブフォルダがルーティングから除外されます。

An example folder structure using private folders

`app`ディレクトリ内のファイルはデフォルトで安全にコロケートできるため、プライベートフォルダはコロケーションに必須ではありません。ただし、以下の目的で役立ちます。

UIロジックをルーティングロジックから分離する。
プロジェクト全体およびNext.jsエコシステム全体で内部ファイルを一貫して整理する。
コードエディタでファイルをソートおよびグループ化する。
将来のNext.jsファイル規約との潜在的な名前の衝突を回避する。

知っておくと良いこと:

フレームワークの規約ではありませんが、プライベートフォルダ外のファイルも同じアンダースコアパターンを使用して「プライベート」としてマークすることを検討することもできます。

アンダースコアで始まるURLセグメントは、フォルダ名の先頭に`%5F`（アンダースコアのURLエンコード形式）を付けることで作成できます: `%5FfolderName`。

プライベートフォルダを使用しない場合、予期せぬ名前の衝突を防ぐためにNext.jsの特殊なファイル規約を知っておくと役立つでしょう。

ルーティンググループ

ルーティンググループは、フォルダを括弧で囲むことで作成できます: (folderName)

これは、そのフォルダが組織的な目的のものであり、ルーティングのURLパスには含まれるべきではないことを示します。

An example folder structure using route groups

ルーティンググループは以下の目的で役立ちます。

サイトのセクション、目的、またはチームごとにルーティングを整理する。例：マーケティングページ、管理ページなど。
同じルートセグメントレベルでネストされたレイアウトを有効にする
- 同じセグメント内に複数のネストされたレイアウトを作成する（複数のルートレイアウトを含む）
- 共通セグメント内のルーティングのサブセットにレイアウトを追加する

`src`ディレクトリ

Next.jsは、アプリケーションコード（`app`を含む）をオプションの`src`ディレクトリ内に保存することをサポートしています。これにより、アプリケーションコードが、主にプロジェクトのルートに存在するプロジェクト設定ファイルから分離されます。

An example folder structure with the `src` directory

例

以下のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最もシンプルな結論は、あなたとあなたのチームに適した戦略を選択し、プロジェクト全体で一貫性を保つことです。

知っておくと良いこと: 以下の例では、`components` と `lib` フォルダを一般的なプレースホルダーとして使用しています。これらの名前にはフレームワーク上の特別な意味はなく、あなたのプロジェクトでは `ui`、`utils`、`hooks`、`styles` などの他のフォルダを使用することもできます。