Next.js プロジェクト構造
このページでは、Next.jsアプリケーションのプロジェクト構造について概説します。トップレベルのファイルとフォルダ、設定ファイル、および app と pages ディレクトリ内のルーティング規則について説明します。
各命名規則の詳細については、ファイル名やフォルダ名をクリックして確認してください。
トップレベルフォルダ
トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。
トップレベルファイル
トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、監視ツールの統合、環境変数の定義に使用されます。
| Next.js | |
next.config.js | Next.jsの設定ファイル |
package.json | プロジェクトの依存関係とスクリプト |
instrumentation.ts | OpenTelemetryとインストルメンテーションファイル |
middleware.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 ルーティング規則
以下のファイル命名規則は、app ルーターでルートを定義し、メタデータを処理するために使用されます。
ルーティングファイル
layout | .js .jsx .tsx | レイアウト |
page | .js .jsx .tsx | ページ |
loading | .js .jsx .tsx | ローディングUI |
not-found | .js .jsx .tsx | 404 UI |
error | .js .jsx .tsx | エラーUI |
global-error | .js .jsx .tsx | グローバルエラーUI |
route | .js .ts | APIエンドポイント |
template | .js .jsx .tsx | 再レンダリングされるレイアウト |
default | .js .jsx .tsx | 並列ルートのフォールバックページ |
ネストされたルート
folder | ルートセグメント |
folder/folder | ネストされたルートセグメント |
ダイナミックルート
[folder] | ダイナミックルートセグメント |
[...folder] | キャッチオールルートセグメント |
[[...folder]] | オプションのキャッチオールルートセグメント |
ルートグループとプライベートフォルダ
並列ルートとインターセプトルート
@folder | 名前付きスロット |
(.)folder | 同じレベルでインターセプト |
(..)folder | 1レベル上でインターセプト |
(..)(..)folder | 2レベル上でインターセプト |
(...)folder | ルートからインターセプト |
メタデータファイル規則
アプリアイコン
favicon | .ico | ファビコンファイル |
icon | .ico .jpg .jpeg .png .svg | アプリアイコンファイル |
icon | .js .ts .tsx | 生成されたアプリアイコン |
apple-icon | .jpg .jpeg, .png | Appleアプリアイコンファイル |
apple-icon | .js .ts .tsx | 生成されたAppleアプリアイコン |
Open GraphとTwitter画像
opengraph-image | .jpg .jpeg .png .gif | Open Graph画像ファイル |
opengraph-image | .js .ts .tsx | 生成されたOpen Graph画像 |
twitter-image | .jpg .jpeg .png .gif | Twitter画像ファイル |
twitter-image | .js .ts .tsx | 生成されたTwitter画像 |
SEO
pages ルーティング規則
以下のファイル命名規則は、pages ルーターでルートを定義するために使用されます。
特別なファイル
_app | .js .jsx .tsx | カスタムApp |
_document | .js .jsx .tsx | カスタムDocument |
_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 | オプションのキャッチオールルートセグメント |