プロジェクト構造と構成

このページではNext.jsのすべてのフォルダとファイル規則の概要と、プロジェクトを構成するための推奨事項を説明します。

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

トップレベルフォルダ

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


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

トップレベルファイル

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


Next.js
`next.config.js`	Next.jsの設定ファイル
`package.json`	プロジェクトの依存関係とスクリプト
`instrumentation.ts`	OpenTelemetryとInstrumentationファイル
`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ファイル規則との潜在的な命名の競合を回避する。

補足:

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

フォルダ名の先頭に%5F（アンダースコアのURL符号化形式）を付けることで、アンダースコアで始まる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などの他のフォルダを使用することもあります。

プロジェクトファイルを`app`の外に保存する

この戦略では、すべてのアプリケーションコードをプロジェクトのルートの共有フォルダに保存し、appディレクトリを純粋にルーティング目的のために保持します。

An example folder structure with project files outside of app

プロジェクトファイルを`app`内のトップレベルフォルダに保存する

この戦略では、すべてのアプリケーションコードを**appディレクトリのルート**にある共有フォルダに保存します。

An example folder structure with project files inside app

プロジェクトファイルを機能またはルートごとに分割する

この戦略では、グローバルに共有されるアプリケーションコードをルートappディレクトリに保存し、より特定のアプリケーションコードをそれらを使用するルートセグメントに分割します。

An example folder structure with project files split by feature or route

URLパスに影響を与えずにルートを整理する

URLに影響を与えずにルートを整理するには、関連するルートをまとめるグループを作成します。括弧内のフォルダはURLから省略されます（例：(marketing)または(shop)）。

(marketing)と(shop)内のルートは同じURL階層を共有していますが、それらのフォルダ内にlayout.jsファイルを追加することで、各グループに異なるレイアウトを作成できます。

特定のセグメントをレイアウトに組み込む

特定のルートをレイアウトに組み込むには、新しいルートグループ（例：(shop)）を作成し、同じレイアウトを共有するルート（例：accountとcart）をそのグループに移動します。グループ外のルート（例：checkout）はレイアウトを共有しません。

特定のルートにローディングスケルトンを適用する

loading.jsファイルを介してローディングスケルトンを特定のルートに適用するには、新しいルートグループ（例：/(overview)）を作成し、その中にloading.tsxを移動します。

Folder structure showing a loading.tsx and a page.tsx inside the route group

これにより、loading.tsxファイルはURLパス構造に影響を与えることなく、ダッシュボードのすべてのページではなく、ダッシュボード → 概要ページにのみ適用されます。

複数のルートレイアウトを作成する

複数のルートレイアウトを作成するには、トップレベルのlayout.jsファイルを削除し、各ルートグループ内にlayout.jsファイルを追加します。これは、完全に異なるUIや体験を持つセクションにアプリケーションを分割するのに役立ちます。<html>および<body>タグは各ルートレイアウトに追加する必要があります。

上記の例では、(marketing)と(shop)の両方が独自のルートレイアウトを持っています。