プロジェクト構造と構成
このページでは、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 | オプションキャッチオールルートセグメント |