コンテンツへスキップ
Pages Routerはじめにプロジェクト構成

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

このページでは、Next.jsにおけるすべてのフォルダーとファイルの命名規則の概要、およびプロジェクト構成の推奨事項を提供します。

フォルダーとファイル命名規則

トップレベルフォルダー

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

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

トップレベルファイル

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

Next.js
next.config.jsNext.jsの設定ファイル
package.jsonプロジェクトの依存関係とスクリプト
instrumentation.tsOpenTelemetryおよび計測ファイル
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オプションのキャッチオールルートセグメント