プロジェクト構造と整理
このページでは、Next.jsのすべてのフォルダとファイル規約、およびプロジェクトを整理するための推奨事項について概説します。
フォルダとファイル規約
トップレベルフォルダ
トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。

トップレベルファイル
トップレベルファイルは、アプリケーションの設定、依存関係の管理、プロキシの実行、監視ツールの統合、環境変数の定義に使用されます。
| Next.js | |
next.config.js | Next.jsの設定ファイル |
package.json | プロジェクトの依存関係とスクリプト |
instrumentation.ts | OpenTelemetryとインストルメンテーションファイル |
proxy.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 | カスタムドキュメント |
_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 | オプションのキャッチオールセグメント |
役に立ちましたか?
