| title | sidebar_label | description |
|---|---|---|
Next.jsのプロジェクト構成 |
プロジェクト構成 |
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 用の設定ファイル |
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 のフォールバックページ |
folder |
RouteSegment |
folder/folder |
ネストされた RouteSegment |
[folder] |
Dynamic route Segment |
[...folder] |
Catch-all Segment |
[[...folder]] |
Optional catch-all Segment |
(folder) |
ルーティングに影響を与えずにルートをグループ化する |
_folder |
フォルダーとすべての子 Segment をルーティングから除外する |
@folder |
Named slot |
(.)folder |
同階層の Intercept |
(..)folder |
1 つうえの階層の Intercept |
(..)(..)folder |
2 つうえの階層の Intercept |
(...)folder |
ルートからの Intercept |
favicon |
.ico |
ファビコンファイル |
icon |
.png .svg |
アプリアイコンファイル |
icon |
.ico .jpg .jpeg .png .svg |
生成されたアプリアイコン |
apple-icon |
.jpg .jpeg, .png |
Apple のアプリアイコンファイル |
apple-icon |
.js .ts .tsx |
生成された Apple のアプリアイコンファイル |
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 画像ファイル |
sitemap |
.xml |
サイトマップファイル |
sitemap |
.js .ts |
生成されたサイトマップ |
robots |
.txt |
Robots file |
robots |
.js .ts |
生成された Robots file |
_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 |
| フォルダ規約 | ||
index |
.js .jsx .tsx |
ホームページ |
folder/index |
.js .jsx .tsx |
ネストしたページ |
| ファイル規約 | ||
index |
.js .jsx .tsx |
ホームページ |
file |
.js .jsx .tsx |
ネストしたページ |
| フォルダ規約 | ||
[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 |