メインコンテンツまでスキップ

Next.jsのプロジェクト構成

このページでは、Next.js プロジェクトのファイルおよびフォルダー構造の概要を説明します。トップレベルのファイルやフォルダ、設定ファイル、そして app ディレクトリと pages ディレクトリ内のルーティング規約について説明します。

トップレベルフォルダ

トップレベルのフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。

トップレベルフォルダ

appApp Router
pagesPages Router
public配信される静的アセット
src(オプション)アプリケーションのソースフォルダ

トップレベルファイル

Next.js
next.config.jsNext.js の設定ファイル
package.jsonプロジェクトの依存関係およびスクリプト
instrumentation.tsOpenTelemetry と Instrumentation
middleware.tsNext.js のリクエスト Middleware
.env環境変数
.env.localローカル環境変数
.env.productionプロダクション環境変数
.env.development開発環境変数
.eslintrc.jsonESLint の設定ファイル
.gitignoreGit が無視するファイルやフォルダの定義
.next-env.d.tsNext.js の TypeScript 定義ファイル
tsconfig.jsonTypeScript 用の設定ファイル
jsconfig.jsonJavaScript 用の設定ファイル

app Routing の規則

Routing Files

layout.js .jsx .tsxlayout
page.js .jsx .tsxpage
loading.js .jsx .tsxローディング UI
not-found.js .jsx .tsxNot found UI
error.js .jsx .tsxエラー UI
global-error.js .jsx .tsxGlobal エラー UI
route.js .tsAPI エンドポイント
template.js .jsx .tsxリレンダリングレイアウト
default.js .jsx .tsxParallel route のフォールバックページ

Nested Routes

folderRouteSegment
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

@folderNamed slot
(.)folder同階層の Intercept
(..)folder1 つうえの階層の Intercept
(..)(..)folder2 つうえの階層の Intercept
(...)folderルートからの Intercept

メタデータファイル規約

App Icons

favicon.icoファビコンファイル
icon.png .svgアプリアイコンファイル
icon.ico .jpg .jpeg .png .svg生成されたアプリアイコン
apple-icon.jpg .jpeg, .pngApple のアプリアイコンファイル
apple-icon.js .ts .tsx生成された Apple のアプリアイコンファイル

Open Graph とツイッター画像

opengraph-image.jpg .jpeg .png .gifOpen Graph の画像ファイル
opengraph-image.js .ts .tsx生成された Open Graph の画像ファイル
twitter-image.jpg .jpeg .png .gifTwitter 画像ファイル
twitter-image.js .ts .tsx生成された Twitter 画像ファイル

SEO

sitemap.xmlサイトマップファイル
sitemap.js .ts生成されたサイトマップ
robots.txtRobots 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 .tsx404 Error Page
500.js .jsx .tsx500 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 .tsxDynamic route Segment
[...folder]/index.js .jsx .tsxCatch-all Segment
[[...folder]]/index.js .jsx .tsxOptional catch-all Segment
ファイル規約
[file].js .jsx .tsxDynamic route Segment
[...file].js .jsx .tsxCatch-all Segment
[[...file]].js .jsx .tsxOptional catch-all Segment