App Routerのすべてのファイルとフォルダーの規約を1つの検索できる表にまとめ、app/内のファイルパスをURLに変換するテスターと、検証済みのlayout、loading、errorのコードを用意しました。
App Routerでは、app/内のフォルダーがURLのセグメントになり、特別なファイルが各セグメントの画面を決めます。pageはセグメントを公開し、layoutはそれを包み、loadingはSuspenseのフォールバックを追加し、errorはエラー境界を追加し、routeはAPIを提供します。角かっこはセグメントを動的にし、丸かっこはURLを変えずにルートをまとめ、アンダースコアはフォルダーを非公開にします。
特によく書くファイル
App Routerに関するフォーラムの質問の多くは、ファイルをどこに置くのか、なぜ認識されないのかというものです。この早見表はその疑問に直接答えます。規約を検索し、ファイルパスを入力して生成されるURLを確認し、最小限のファイルをコピーできます。内容はすべて最新のnextjs.orgのドキュメントと照らし合わせて確認しています。
レイアウトは子ページ間を移動してもマウントされたままなので、状態やエフェクトが維持されます。テンプレートのファイルはレイアウトのすぐ内側に置かれ、ページ遷移のたびに再レンダリングされるため、ページが変わるたびに実行したいエフェクトに向いています。
エラー境界はClient Componentである必要があるため、'use client'の行が抜けているか、またはerror.tsxが包んでいない同じセグメントのレイアウトでエラーが起きているかのどちらかです。ルートレイアウトのエラーにはglobal-errorが必要です。
任意のdigestを持つErrorオブジェクトであるerrorと、セグメントを再取得して再レンダリングするretryです。ドキュメントによると、retryはバージョン16.3で安定版になりました。再取得せずにエラーをクリアするresetも引き続き使えますが、通常はretryを選びます。
アンダースコアで始まるフォルダーは非公開で、ルーティングでは無視されます。アンダースコアで始まる実際のURLセグメントが必要な場合は、エンコードした形の%5Fを使って、%5Fdraftsのようにフォルダーに名前を付けます。
バージョン16で、ミドルウェアのファイル規約は非推奨となりproxyに名前が変わりました。そのため新しいプロジェクトでは、プロジェクトのルート（またはsrc内）に置いたproxy.tsからproxy関数をエクスポートします。Next.jsには、ファイル名と関数名を変更するmiddleware-to-proxyというcodemodが用意されています。
ファイル、フォルダー、メタデータファイル
必須で、htmlとbodyを書く唯一の場所です。すべてのページはchildrenの位置にレンダリングされます。
paramsはPromiseなので、ページを非同期にし、slugを使う前にawaitします。
ページ遷移時、ページがストリーミングされている間にすぐ表示されます。propsは受け取りません。
Client Componentである必要があります。retryはセグメントを再取得して再レンダリングします。
表示中はルートレイアウトを置き換えるため、独自のhtmlとbodyを持ち、メタデータはエクスポートできません。
ファイル
セグメントとその子に共通の画面。マウントされたまま保たれる
ファイル
ルートの画面。セグメントを公開する
ファイル
セグメントのSuspenseフォールバック
ファイル
notFound()や一致しないURLで表示される画面
ファイル
エラー境界。Client Component
ファイル
ルートレイアウト用のエラー画面。独自のhtmlとbodyを持つ
ファイル
APIエンドポイント。.jsか.tsのみ
ファイル
レイアウトに似ているが、ページ遷移のたびに再レンダリングされる
ファイル
パラレルルートのスロットのフォールバック
ファイル
forbidden()用の画面
ファイル
unauthorized()用の画面
ルートのファイル
プロジェクトのルートに置くリクエストプロキシ
ルートのファイル
OpenTelemetryと計測の設定
フォルダー
URLのセグメント
フォルダー
動的セグメント
フォルダー
キャッチオールセグメント、1つ以上の部分
フォルダー
オプションのキャッチオール、親にも一致する
フォルダー
ルートグループ、URLには含まれない
フォルダー
非公開フォルダー、ルーティングでは無視される
フォルダー
パラレルルート用の名前付きスロット
フォルダー
同じ階層のルートをインターセプトする
フォルダー
1つ上の階層のルートをインターセプトする
フォルダー
2つ上の階層のルートをインターセプトする
フォルダー
appのルートからのルートをインターセプトする
メタデータ
アプリのアイコン。画像またはコードで生成
メタデータ
共有用の画像。ファイルまたは生成
メタデータ
sitemap.xmlとrobots.txt。静的または生成
app/内のファイルパスを入力してください。テスターはルートグループを取り除き、動的セグメントを読み取って、URLパターン、またはそのファイルがルートにならない理由を表示します。
ファイルパス
規約を検索
検索
error, slot, group
種類で絞り込む
すべて
{n}件を表示
app/blog/[slug]/page.tsxのようなパスを入力してください
ルートではありません：_で始まるフォルダーは非公開です。
公開ルートではありません。{file}は、このフォルダーのルートを包む特別なファイルです。
公開ルートではありません。{file}は同じ場所に置かれたファイルで、配信されることはありません。
routeファイルは.jsか.tsである必要があります。
{d}はルートグループで、URLには含まれません
{d}はパラレルルートのスロットで、URLのセグメントではありません
{d}は親のパスにも一致します
{d}はインターセプトするルートです
{url}のAPIエンドポイント
{url}のページ
無料で始める · クレジットカード不要