プロジェクトの構造と構成
このページでは、Next.jsにおけるフォルダとファイルの規則の概要と、プロジェクトを整理するためのヒントを提供します。
フォルダとファイルの規則
トップレベルフォルダ
トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。
トップレベルファイル
トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、監視ツールの統合、環境変数の定義などに使用されます。
| 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の設定ファイル |
ファイルの規則
_app | .js .jsx .tsx | カスタムApp |
_document | .js .jsx .tsx | カスタムDocument |
_error | .js .jsx .tsx | カスタムエラーページ |
404 | .js .jsx .tsx | 404エラーページ |
500 | .js .jsx .tsx | 500エラーページ |
ルート
| フォルダ規則 | ||
index | .js .jsx .tsx | ホームページ |
folder/index | .js .jsx .tsx | ネストされたページ |
| ファイル規則 | ||
index | .js .jsx .tsx | ホームページ |
file | .js .jsx .tsx | ネストされたページ |
動的ルート
| フォルダ規則 | ||
[folder]/index | .js .jsx .tsx | 動的ルートセグメント |
[...folder]/index | .js .jsx .tsx | キャッチオールルートセグメント |
[[...folder]]/index | .js .jsx .tsx | オプショナルキャッチオールルートセグメント |
| ファイル規則 | ||
[file] | .js .jsx .tsx | 動的ルートセグメント |
[...file] | .js .jsx .tsx | キャッチオールルートセグメント |
[[...file]] | .js .jsx .tsx | オプショナルキャッチオールルートセグメント |