Next.jsのプロジェクト構成について知る

この記事は、参考にした以下の記事に基づいて進めていきます。
また、参考記事の全ての情報を取り上げるわけではなく、筆者が特に注目した部分に焦点を当てていきます。
https://ja.next-community-docs.dev/docs/app-router/getting-started/project-structure

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

Routing Files

ファイル名	役割
layout	アプリケーションの共通レイアウトを定義します。複数のページにわたって共有される要素（ヘッダー、フッター、ナビゲーションなど）をここに配置します。 ./app/layout.tsxで指定したレイアウトはすべてのページに適用されます。
page	個々のページのコンテンツを定義します。各ページ固有のコンポーネントとロジックが含まれます。 ./app/{パス名}/page.tsxを作成すると、ブラウザから http://{サーバ名}/{パス名} でアクセスできます。
loading	ページの読み込み中に表示されるコンポーネントです。時間のかかるコンポーネントを表示する際に非同期で呼び出しを行い、待っている間ローディングアイコン等を表示することができます。
not-found	404エラー（ページが見つからない）を表示するためのコンポーネントです。存在しないページにアクセスした場合に表示されます。
error	ページレベルのエラーを処理するコンポーネントです。特定のページで発生したエラーを表示するために使用されます。
global-error	アプリケーション全体のエラーを処理するコンポーネントです。全体的なエラー処理とエラーページの表示に使われます。 errorとの違いは、 layoutや template で発生したエラーを捕捉することができます。
route	特定のURLパスに対するカスタムリクエストハンドラを定義するために使用されます。
template	ページやコンポーネントの共通レイアウトやスタイルを定義するテンプレートです。再利用可能なUIパターンやレイアウトを提供します。 画面遷移時にレイアウトに埋め込んだフォームを初期化したい場合やアニメーションを表示したい場合など、レイアウトの代わりにテンプレートが使用されます。
default	スロット内や該当のルートにスロットのpageがない場合にレンダリングするファイルを定義することができます。 リロード時に、Next.jsはまず、一致しないスロットのdefaultをレンダリングしようとします。それが利用できない場合は、404がレンダリングされます。

Dynamic Routes

フォルダ形式	名前	役割
[folder]	Dynamic Routes	通常の動的ルートで、特定のパターンにマッチするURLを捕捉します。例えば、ユーザーのプロファイルページなど、特定のIDや名前でアクセスされるページです。
[…folder]		複数のセグメントを含むURLを捕捉します。例えば、未知の数のパスセグメントを持つURLを扱う場合に使用します。 http://～/blog/{slug1}/{slug2}/{slug3} のように、階層的なパラメータを受け取る場合に使用します。
[[…folder]]		[…folder]の振る舞いを持ちつつ、ルートが存在しない場合にマッチするフォールバックページを提供します。 上記の例では/blog2/123 にはアクセスできても/blog2にアクセスすると404エラーが出るので、このページを表示するために使用します。

Route Groups と Private Folders

フォルダ形式	名前	役割
(folder)	Route Groups	複数の関連するページやパスを一つのセクションとしてまとめるために使われます。
_folder	Private Folders	プライベートまたは非公開のページやコンポーネントを示すために使用されます。

Parallel と Intercepted Routes

フォルダ形式	名前	役割
@folder	Parallel	ひとつのレイアウトの中で複数の子ノードを並列に描画することができます。ダッシュボードやソーシャルサイトのフィードなど、アプリケーション内の非常に動的なセクションのに対して、パラレルなルーティングを使用して複雑なルーティングパターンを実装できます。 この@のつく形式のことをスロットと呼びます。（@modalの場合は、modalスロット）
(.)folder	Intercepted Routes	現在のページの上に、別のページをモーダルで表示することができます。 こちらは同階層のセグメントにマッチします。 Intercepted Routesの使用例については以下が分かりやすかったです。 https://www.builder.io/blog/nextjs-14-intercepting-routes
(..)folder		一つ上のディレクトリのセグメントにマッチします。
(..)(..)folder		二つ上のディレクトリのセグメントにマッチします。
(…)folder		ルートディレクトリのセグメントにマッチします。

参考

とほほのNext.js入門 - とほほのWWW入門

【Next.js ✗ App Router】Routingまとめ 〜後半〜

Next.js 14 Intercepting Routes

Next.jsのIntercepting Routesを使ってみた