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 | 見つからない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 | オプションキャッチオールルートセグメント |