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 ルーティング規則
ルーティングファイル
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 ルーティング規則
特別なファイル
_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 | オプションのキャッチオールルートセグメント |