App Routerのファイル規約
Next.js App Routerでは、特定のファイル名がそれぞれの役割を持ちます。この規約を理解することがApp Router習得の第一歩です。
- page.tsx：そのURLに対応するページコンポーネント（公開URL）
- layout.tsx：子ページを包むレイアウト（ナビゲーション・サイドバー等）
- loading.tsx：データフェッチ中に表示するローディングUI（React Suspense自動適用）
- error.tsx：エラー発生時に表示するエラーUI（Client Component必須）
- not-found.tsx：404ページのカスタマイズ
- route.ts：APIエンドポイント（GET/POST/PUT/DELETE等）
- template.tsx：layoutと似るが、ナビゲーション毎に再マウントされる
ルーティングのパターン
動的ルート
`app/blog/[slug]/page.tsx`のように角括弧でパラメータを定義します。`params.slug`でパラメータ値にアクセスできます。複数パラメータは`[…segments]`（キャッチオール）や`[[…segments]]`（オプショナルキャッチオール）で対応します。
ルートグループ
`(group)`のように丸括弧でディレクトリを作るとURLに影響せずにファイルをグループ化できます。`app/(marketing)/about/page.tsx`はURLが`/about`になります。認証が必要なページとパブリックページを分ける際に使います。
並列ルート（@slot）
`app/@modal/page.tsx`のように`@`から始まるディレクトリは、同じレイアウト内に複数のページを同時表示する「並列ルート（Parallel Routes）」です。モーダルと背景ページを同時に管理できます。
ネストレイアウトの設計
App Routerのレイアウトはネスト可能です。`app/layout.tsx`（全体レイアウト）→`app/(user)/layout.tsx`（認証後エリアのレイアウト）→`app/(user)/dashboard/layout.tsx`（ダッシュボード固有のレイアウト）という階層構造が組めます。各レイアウトは子コンポーネントが変わっても再レンダリングされません。
Server Actionsの活用
Next.js 14以降のServer Actionsにより、フォームからAPIエンドポイントを経由せずに直接サーバー関数を呼び出せます。`’use server’`ディレクティブを使うことで、クライアントからサーバー関数を直接呼び出す実装が可能です。データ変更後の`revalidatePath`・`revalidateTag`でキャッシュを無効化します。
メタデータとSEO
App RouterではmetadataオブジェクトをexportするだけでSEOタグが自動設定されます。
- 静的メタデータ：`export const metadata: Metadata = { title: ‘ページタイトル’, description: ‘説明’ }`
- 動的メタデータ：`export async function generateMetadata({ params }) { return { title: await getTitle(params.slug) } }`
- Open Graphタグ・Twitterカードも`metadata`オブジェクトで設定可能
まとめ
App RouterはPage Routerより複雑ですが、Server Components・ネストレイアウト・Server Actionsにより、より宣言的でパフォーマンスの高いアプリケーションが構築できます。Next.js入門でReactとNext.jsの基礎を押さえてから、App Routerの各機能を段階的に習得することをお勧めします。
コメントを残す