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 のリクエスト Middleware |
.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 Routing の規則
Routing Files
layout | .js .jsx .tsx | layout |
page | .js .jsx .tsx | page |
loading | .js .jsx .tsx | ローディング UI |
not-found | .js .jsx .tsx | Not found UI |
error | .js .jsx .tsx | エラー UI |
global-error | .js .jsx .tsx | Global エラー UI |
route | .js .ts | API エンドポイント |
template | .js .jsx .tsx | リレンダリングレイアウト |
default | .js .jsx .tsx | Parallel route のフォールバックページ |
Nested Routes
folder | RouteSegment |
folder/folder | ネストされた RouteSegment |
Dynamic Routes
[folder] | Dynamic route Segment |
[...folder] | Catch-all Segment |
[[...folder]] | Optional catch-all Segment |
Route Groups と Private Folders
(folder) | ルーティングに影響を与えずにルートをグループ化する |
_folder | フォルダーとすべての子 Segment をルーティングから除外する |
Parallel と Intercepted Routes
@folder | Named slot |
(.)folder | 同階層の Intercept |
(..)folder | 1 つうえの階層の Intercept |
(..)(..)folder | 2 つうえの階層の Intercept |
(...)folder | ルートからの Intercept |
メタデータファイル規約
App Icons
favicon | .ico | ファビコンファイル |
icon | .png .svg | アプリアイコンファイル |
icon | .ico .jpg .jpeg .png .svg | 生成されたアプリアイコン |
apple-icon | .jpg .jpeg, .png | Apple のアプリアイコンファイル |
apple-icon | .js .ts .tsx | 生成された Apple のアプリアイコ ンファイル |
Open Graph とツイッター画像
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 file |
robots | .js .ts | 生成された Robots file |
pages のルーティング規則
特殊ファイル
_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 Segment |
[...folder]/index | .js .jsx .tsx | Catch-all Segment |
[[...folder]]/index | .js .jsx .tsx | Optional catch-all Segment |
| ファイル規約 | ||
[file] | .js .jsx .tsx | Dynamic route Segment |
[...file] | .js .jsx .tsx | Catch-all Segment |
[[...file]] | .js .jsx .tsx | Optional catch-all Segment |