Next.js Project Structure
このページでは、Next.js アプリケーションのプロジェクト構造の概要を提供しています。最上位のファイルやフォルダ、設定ファイル、そして app および pages ディレクトリ内のルーティング規則について説明します。
ファイルやフォルダの名前をクリックして、各規約について詳しく学びましょう。
Top-level folders
トップレベルのフォルダは、アプリケーションの code と静的アセットを整理するために使用されます。
app | App Router |
pages | Pages Router |
public | 提供される静的アセット |
src | 任意のアプリケーション source フォルダ |
Top-level files
トップレベルのファイルは、アプリケーションの設定、依存関係の管理、middleware の実行、監視ツールの統合、および environment variables の定義に使用されます。
| Next.js | |
next.config.js | Next.js の設定ファイル |
package.json | プロジェクトの依存関係と scripts |
instrumentation.ts | OpenTelemetry と Instrumentation ファイル |
middleware.ts | Next.js request middleware |
.env | Environment variables |
.env.local | ローカルの environment variables |
.env.production | Production environment variables |
.env.development | Development environment variables |
.eslintrc.json | ESLint の設定ファイル |
.gitignore | 無視する Git ファイルやフォルダ |
next-env.d.ts | Next.js のための TypeScript declaration ファイル |
tsconfig.json | TypeScript の設定ファイル |
jsconfig.json | JavaScript の設定ファイル |
app Routing Conventions
次のファイル規則は、app routerで routes を定義し、metadata を処理するために使用されます。
ルーティングファイル
layout | .js .jsx .tsx | Layout |
page | .js .jsx .tsx | ページ |
loading | .js .jsx .tsx | Loading UI |
not-found | .js .jsx .tsx | UI が見つかりません |
error | .js .jsx .tsx | Error UI |
global-error | .js .jsx .tsx | グローバル error UI |
route | .js .ts | API エンドポイント |
template | .js .jsx .tsx | layout を再レンダリング |
default | .js .jsx .tsx | Parallel route fallback ページ |
ネストされた Routes
folder | Route セグメント |
folder/folder | ネストされた route セグメント |
Dynamic Routes
[folder] | Dynamic route セグメント |
[...folder] | Catch-all route セグメント |
[[...folder]] | 任意の catch-all route セグメント |
Route グループとプライベートフォルダ
(folder) | ルーティングに影響を与えずに routes をグループ化する |
_folder | ルーティングから Opt フォルダとすべての子セグメントを除外する |
Parallel と Intercepted Routes
@folder | 名前付きスロット |
(.)folder | 同一レベルをインターセプト |
(..)folder | 一つ上のレベルをインターセプト |
(..)(..)folder | 二つ上のレベルをインターセプト |
(...)folder | root からのインターセプト |
Metadata ファイルの規約
App アイコン
favicon | .ico | Favicon ファイル |
icon | .ico .jpg .jpeg .png .svg | App Icon ファイル |
icon | .js .ts .tsx | 生成された App Icon |
apple-icon | .jpg .jpeg, .png | Apple App Icon ファイル |
apple-icon | .js .ts .tsx | Apple App Icon を生成しました |
Open Graph と Twitter 画像
opengraph-image | .jpg .jpeg .png .gif | Open Graph image ファイル |
opengraph-image | .js .ts .tsx | 生成された Open Graph image |
twitter-image | .jpg .jpeg .png .gif | Twitter image ファイル |
twitter-image | .js .ts .tsx | 生成された Twitter image |
SEO
sitemap | .xml | Sitemap ファイル |
sitemap | .js .ts | 生成された Sitemap |
robots | .txt | Robots ファイル |
robots | .js .ts | 生成された Robots ファイル |
pages Routing Conventions
以下のファイル規則は、pages routerで routes を定義するために使用されます。
特別なファイル
_app | .js .jsx .tsx | カスタム App |
_document | .js .jsx .tsx | カスタム Document |
_error | .js .jsx .tsx | カスタム Error Page |
404 | .js .jsx .tsx | 404 Error Page |
500 | .js .jsx .tsx | 500 Error Page |
Routes
| フォルダの規則 | ||
index | .js .jsx .tsx | ホームページ |
folder/index | .js .jsx .tsx | ネストされたページ |
| ファイル規約 | ||
index | .js .jsx .tsx | ホームページ |
file | .js .jsx .tsx | ネストされたページ |
Dynamic Routes
| フォルダーの規則 | ||
[folder]/index | .js .jsx .tsx | Dynamic route セグメント |
[...folder]/index | .js .jsx .tsx | Catch-all route セグメント |
[[...folder]]/index | .js .jsx .tsx | 任意の catch-all route セグメント |
| ファイル規約 | ||
[file] | .js .jsx .tsx | Dynamic route セグメント |
[...file] | .js .jsx .tsx | Catch-all route セグメント |
[[...file]] | .js .jsx .tsx | オプションの catch-all route セグメント |