Next.js プロジェクト構成
このページでは、Next.js アプリケーションのプロジェクト構成の概要を提供します。トップレベルのファイルとフォルダ、設定ファイル、および app と pages ディレクトリ内のルーティング規約をカバーしています。
ファイルとフォルダの名前をクリックして、それぞれの規約について詳細を学んでください。
トップレベルのフォルダ
トップレベルのフォルダは、アプリケーションのコードや静的アセットを整理するために使います。
app | App Router |
pages | Pages Router |
public | 提供する静的アセット |
src | オプション のアプリケーションソースフォルダ |
トップレベルのファイル
トップレベルのファイルは、アプリケーションを設定し、依存関係を管理し、ミドルウェアを実行し、監視ツールを統合し、環境変数を定義するために使用します。
| Next.js | |
next.config.js | Next.js の設定ファイル |
package.json | プロジェクトの依存関係とスクリプト |
instrumentation.ts | OpenTelemetry とinstrumentationファイル |
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 router内でのルートの定義とメタデータの処理に使用します。
ルーティングファイル
layout | .js .jsx .tsx | レイアウト |
page | .js .jsx .tsx | ページ |
loading | .js .jsx .tsx | ローディング UI |
not-found | .js .jsx .tsx | Not found UI |
error | .js .jsx .tsx | エラー UI |
global-error | .js .jsx .tsx | グローバルエラー UI |
route | .js .ts | API エンドポイント |
template | .js .jsx .tsx | 再レンダリングされるレイアウト |
default | .js .jsx .tsx | Parallel route のフォールバックページ |
入れ子のルート
folder | ルートセグメント |
folder/folder | 入れ子のルートセグメント |
動的ルート
[folder] | 動的ルートセグメント |
[...folder] | Catch-all route セグメント |
[[...folder]] | Optional Catch-all route セグメント |
Route Groups とプライベートフォルダ
(folder) | ルーティングに影響を与えずにルートをグループ化 |
_folder | フォルダとすべての子セグメントをルーティングから除外 |
パラレルおよびインターセプトルート
@folder | 名前付きスロット |
(.)folder | 同レベルでインターセプト |
(..)folder | 1レベル上でインターセプト |
(..)(..)folder | 2レベル上でインターセプト |
(...)folder | root からインターセプト |
メタデータファイルの規約
アプリアイコン
favicon | .ico | Favicon ファイル |
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
sitemap | .xml | サイトマップファイル |
sitemap | .js .ts | 生成されたサイトマップ |
robots | .txt | Robots ファイル |
robots | .js .ts | 生成されたRobotsファイル |
pages ルーティング規約
以下のファイル規約は、pages router内でのルートの定義に使用します。
特殊ファイル
_app | .js .jsx .tsx | カスタムアプリ |
_document | .js .jsx .tsx | カスタムドキュメント |
_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 | Catch-all route セグメント |
[[...folder]]/index | .js .jsx .tsx | Optional Catch-all route セグメント |
| ファイル規約 | ||
[file] | .js .jsx .tsx | 動的ル ートセグメント |
[...file] | .js .jsx .tsx | Catch-all route セグメント |
[[...file]] | .js .jsx .tsx | Optional Catch-all route セグメント |