コンテンツにスキップ

プロジェクト構造と整理

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

フォルダとファイル規約

トップレベルフォルダ

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

Route segments to path segments
appApp Router
pagesPages Router
public提供される静的アセット
srcオプションのアプリケーションソースフォルダ

トップレベルファイル

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

Next.js
next.config.jsNext.jsの設定ファイル
package.jsonプロジェクトの依存関係とスクリプト
instrumentation.tsOpenTelemetryとインストルメンテーションファイル
proxy.tsNext.jsリクエストプロキシ
.env環境変数
.env.localローカル環境変数
.env.production本番環境変数
.env.development開発環境変数
.eslintrc.jsonESLintの設定ファイル
.gitignoreGitファイルとフォルダの無視
next-env.d.tsNext.jsのTypeScript宣言ファイル
tsconfig.jsonTypeScriptの設定ファイル
jsconfig.jsonJavaScriptの設定ファイル

ファイル規約

_app.js .jsx .tsxカスタムApp
_document.js .jsx .tsxカスタムドキュメント
_error.js .jsx .tsxカスタムエラーページ
404.js .jsx .tsx404エラーページ
500.js .jsx .tsx500エラーページ

ルーティング

フォルダ規約
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オプションのキャッチオールセグメント