Menu

プロジェクトの構造と構成

このページでは、Next.jsのすべてのフォルダとファイルの規則、およびプロジェクトを組織化するための推奨事項の概要を示します。

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

トップレベルフォルダ

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

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

トップレベルファイル

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

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

ファイル規則

_app.js .jsx .tsxカスタムApp
_document.js .jsx .tsxカスタムDocument
_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オプションのキャッチオールルートセグメント