next.jsのプロジェクト構造に関して
公式のサイトに書いてあるものをまとめました。
トップレベルのファイル
| ファイル名 | 説明 |
|---|---|
next.config.js |
Next.jsの設定ファイル Next.jsアプリケーションのカスタム設定や環境変数の定義 |
middleware.ts |
Next.jsのリクエストミドルウェア リクエストの前処理や後処理を実行するためのカスタムコード |
instrumentation.ts |
OpenTelemetryとInstrumentation OpenTelemetryはアプリケーションの監視やトレーシング, Instrumentationは計測やトレース |
.env |
環境変数 アプリケーションで使用する機密情報や設定を管理 |
.env.local |
ローカルの環境変数 ローカル開発環境でのみ適用される変数を管理 |
.env.production |
本番環境の環境変数 本番環境でのみ適用される変数を管理 |
.env.development |
開発環境の環境変数 開発環境でのみ適用される変数を管理 |
.next-env.d.ts |
Next.jsのTypeScript宣言ファイル Next.jsアプリケーションで使用するTypeScriptの型定義 |
Ecosystem
| ファイル名 | 説明 |
|---|---|
package.json |
プロジェクトの依存関係とスクリプト プロジェクトで使用するパッケージやそのバージョン情報、開発に必要なスクリプトなど |
.gitignore |
無視するべきGitのファイルとフォルダ（Gitのバージョン管理から除外） |
tsconfig.json |
TypeScriptの設定ファイル TypeScriptのコンパイルオプションやプロジェクトの構成を指定（特定のコンパイラオプションの有効化や、コンパイル対象ファイルの設定、型定義ファイルの取り扱いなど） |
jsconfig.json |
JavaScriptの設定ファイル プロジェクトの設定やコンパイルオプションを指定 |
.eslintrc.json |
ESLintの設定ファイル ESLintのルールや設定、プラグインの適用などが指定 |
Top-level folders
| フォルダ名 | 説明 |
|---|---|
app |
このフォルダ内には、アプリケーションのルーティングに関連するファイルやコンポーネントが配置されます。 |
pages |
このフォルダ内に配置されたファイルが自動的にルーティングされます。各ファイルは単一のページとなり、URLパスに基づいてアクセスされます。例えば、pages/index.jsはルートパス（/）に対応します |
public |
サーブするための静的アセットを格納するフォルダです。ここに配置されたファイルは、直接公開され、アプリケーションからアクセスできます。一般的には、画像、CSSファイル、フォントなどの静的なリソースを配置します。 |
src |
オプションのアプリケーションソースフォルダです。このフォルダは必須ではありませんが、プロジェクトのソースコードをより構造化したい場合に使用されます。例えば、コンポーネント、ユーティリティ関数、カスタムフックなどのソースコードをこのフォルダ内に配置することができます。 |
app Routing Conventions
Routing Files
| ファイル名 | 拡張子 | 説明 |
|---|---|---|
layout |
.js .jsx .tsx | レイアウトを定義するファイルです。 複数のページで共通のヘッダーやフッター、ナビゲーションなど |
page |
.js .jsx .tsx | 各ページに対応するファイルです。 複数のページで共通のヘッダーやフッター、ナビゲーションなど |
loading |
.js .jsx .tsx | ローディング UI を定義するファイルです。 データの読み込み中やページの切り替え時に表示されるローディングUIを定義するために使用されます。通常、非同期データの取得や処理が行われている間に表示されるコンポーネント |
not-found |
.js .jsx .tsx | ページが見つからない場合の UI を定義するファイルです。存在しないページにアクセスされた場合に表示されるUIを定義 |
error |
.js .jsx .tsx | エラー UI を定義するファイルです。 APIリクエストの失敗やデータの取得エラーなどの場合に表示されるコンポーネント |
global-error |
.js .jsx .tsx | グローバルエラー UI を定義するファイルです。 ネットワークの切断や予期せぬエラーが発生した場合に表示されるコンポーネント |
route |
.js .ts | API エンドポイントを定義するファイルです。 クライアントからのリクエストに応じてデータを取得・送信するためのサーバーサイドの処理 |
template |
.js .jsx .tsx | 再レンダリングされたレイアウトを定義するファイルです。 コンテンツの一部を動的に変更する必要がある場合に使用 |
default |
.js .jsx .tsx | パラレルルートのフォールバックページを定義するファイルです。 他の特定のファイルがマッチしない場合に表示されるページ |
Nested Routes
| フォルダー | ルートセグメント |
|---|---|
folder |
ネストされたルートセグメント 例えば、/folderというパスがある場合、folderはルートセグメントとなります。セグメントは親ルートに対応し、フォルダ内のページを表示するために使用されます。 |
folder/folder |
ネストされたルートセグメント |
Dynamic Routes
| フォルダー | ダイナミックなルートセグメント |
|---|---|
[folder] |
ダイナミックなルートセグメント。 このセグメントは、ユーザーからのリクエストに応じて異なる値を取り、該当するページを表示するために使用 (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example) |
[...folder] |
キャッチオールセグメント。このセグメントは、可変の階層構造を持つパスに対応するために使用されます。例えば、/folder1/folder2/folder3などのパスにマッチさせることができます。  (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) |
[[...folder]] |
オプションのキャッチオールセグメント。例えば、/[[...folder]]というパスがある場合、[[...folder]]はオプションのキャッチオールセグメントとなります。このセグメントは、任意の階層のパスに対応するものであり、存在しない場合には空の値を取ることもあります。  (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) |
Route Groups and Private Folders
| フォルダー | 説明 |
|---|---|
(folder) |
ルーティングに影響を与えずにルートをグループ化します。 特定のルートセグメントをグループ化し、ルーティングに対して特別な動作を追加することなく、関連するページやコンポーネントをまとめることができます。 (https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders) |
_folder |
プライベートフォルダとそのすべての子セグメントをルーティングから除外します。 この構文を使用することで、指定したフォルダとそのすべての子セグメントをルーティングから除外し、外部からのアクセスを制限することができます。 (https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) |
Parallel and Intercepted Routes
| ルート | 説明 |
|---|---|
@folder |
名前付きスロット。この構文を使用することで、複数のルートが同じレベルに並べられ、名前付きスロットとして機能する。 (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#convention) |
(.)folder |
同じ階層をインターセプト。この構文を使用することで、同じレベルにある他のルートの処理をインターセプトし、特定の動作を追加。 |
(..)folder |
1つ上の階層をインターセプト。この構文を使用することで、1つ上のレベルにある他のルートの処理をインターセプトし、特定の動作を追加 |
(..)(..)folder |
2つ上の階層をインターセプト。 この構文を使用することで、2つ上のレベルにある他のルートの処理をインターセプトし、特定の動作を追加。 |
(...)folder |
ルートからインターセプト。この構文を使用することで、ルートの直下にある他のルートの処理をインターセプトし、特定の動作を追加 |
Intercepted Routes参考記事１
Intercepted Routes参考記事2
Metadata File Conventions
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 and Twitter Images
| イメージ | 拡張子 | 説明 |
|---|---|---|
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 |
.js .ts | 生成されたロボットファイル |
pages Routing Conventions
Special Files
| ファイル | 拡張子 | 説明 |
|---|---|---|
_app |
.js .jsx .tsx | カスタムApp。 アプリケーションのカスタム設定や共通のレイアウトを定義 |
_document |
.js .jsx .tsx | カスタムDocument。Next.jsアプリケーションのHTMLドキュメントのカスタマイズを行う |
_error |
.js .jsx .tsx | カスタムエラーページ |
404 |
.js .jsx .tsx | 404エラーページ |
500 |
.js .jsx .tsx | 500エラーページ |
Routes
| ファイル名 | 拡張子 | 説明 |
|---|---|---|
index |
.js .jsx .tsx | ホームページ |
folder/index |
.js .jsx .tsx | ネストされたページ |
Dynamic Routes
以下は、表形式のマークダウンで表示されたファイルの命名規則と説明の一覧です：
| ファイル名 | 拡張子 | 説明 |
|---|---|---|
[folder]/index |
.js .jsx .tsx | ダイナミックなルートセグメント |
[...folder]/index |
.js .jsx .tsx | キャッチオールセグメント |
[[...folder]]/index |
.js .jsx .tsx | オプションのキャッチオールセグメント |