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ファイル
middleware.tsNext.jsリクエストミドルウェア
.env環境変数
.env.localローカル環境変数
.env.production本番環境変数
.env.development開発環境変数
.eslintrc.jsonESLintの設定ファイル
.gitignore無視するGitファイルとフォルダ
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オプショナルキャッチオールルートセグメント