Next.jsプロジェクト構造
このページでは、Next.jsアプリケーションのプロジェクト構造の概要を説明します。トップレベルのファイルとフォルダ、設定ファイル、および`app`ディレクトリと`pages`ディレクトリ内のルーティング規則について説明します。
各規則の詳細については、ファイル名とフォルダ名をクリックしてください。
トップレベルフォルダ
トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。
トップレベルファイル
トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、監視ツールの統合、環境変数の定義に使用されます。
| Next.js | |
next.config.js | Next.jsの設定ファイル |
package.json | プロジェクトの依存関係とスクリプト |
instrumentation.ts | OpenTelemetryと計測ファイル |
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`ルータでルートを定義し、メタデータを処理するために使用されます。
ルーティングファイル
layout | `.js` `jsx` `tsx` | レイアウト |
page | `.js` `jsx` `tsx` | ページ |
loading | `.js` `jsx` `tsx` | ローディングUI |
not-found | `.js` `jsx` `tsx` | 見つからないUI |
error | `.js` `jsx` `tsx` | エラーUI |
global-error | `.js` `jsx` `tsx` | グローバルエラーUI |
route | `.js` `.ts` | APIエンドポイント |
template | `.js` `jsx` `tsx` | 再レンダリングされたレイアウト |
default | `.js` `jsx` `tsx` | 並列ルートフォールバックページ |
ネストされたルート
動的ルート
[フォルダ] | 動的ルートセグメント |
[...フォルダ] | キャッチオールルートセグメント |
[[...フォルダ]] | オプションのキャッチオールルートセグメント |
ルートグループとプライベートフォルダ
並列ルートとインターセプトルート
@フォルダ | 名前付きスロット |
(.)フォルダ | 同じレベルをインターセプトする |
(..)フォルダ | 1つ上のレベルをインターセプトする |
(..)(..)フォルダ | 2つ上のレベルをインターセプトする |
(...)フォルダ | ルートからインターセプトする |
メタデータファイルの規約
アプリのアイコン
favicon | .ico | ファビコンファイル |
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ファイル |