Next.js App Router移行チェックリスト【2025年版】：安全・段階的に進める実務ガイド

目的と全体像

App Router（RSC前提）の採用で、JSペイロード削減・ストリーミング・柔軟なレイアウト構成など多くの恩恵が得られます。本記事は「止めない移行」をテーマに、段階的に進めるチェックリストを提示します。

移行の前提（合意形成）

• 要件: サーバーコンポーネント中心の設計に合意しているか
• 対象: 影響範囲（ページ数、共通レイアウト、フォーム、API）を棚卸し
• 成果指標: LCP/INP/CLS、JS初期バイト、TTFB などの基準値と目標値

ステップ0：共存戦略の決定（モノレポ/分割デプロイ可）

• pages/ と app/ は共存可能。新機能から app/ に実装し、既存は段階的に移行。
• デザインシステムやユーティリティは共有し、UI差異を最小化。

ステップ1：ルートとレイアウトの設計

• app/layout.tsx と app/(group)/layout.tsx で共通UIを分割。
• ルーティングの命名規則を定め、URLの後方互換性を確認。

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

ステップ2：データ取得の移行

• サーバーコンポーネントで async を使い直接フェッチ。cache/revalidate を明示。
• クライアント側状態は最小化し、相互作用が必要な最小範囲に限定。

// app/articles/[slug]/page.tsx
export const revalidate = 60;

export default async function Page({ params }: { params: { slug: string } }) {
  const article = await fetch(`${process.env.API}/articles/${params.slug}`, { next: { revalidate: 60 } }).then(r => r.json());
  return <Article article={article} />;
}

ステップ3：メタデータとOGP

• generateMetadata で動的メタを生成。OG画像は Route Handler で動的生成を検討。

// app/articles/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const data = await getArticle(params.slug);
  return { title: data.title, description: data.description, openGraph: { images: [data.og] } };
}

ステップ4：フォームとアクション

• サーバーアクションを活用し、クライアントのJS依存を削減。

// app/actions.ts
"use server";
export async function createTodo(formData: FormData) { /* ... */ }

ステップ5：API/Route Handlers と Middleware

• app/api/*/route.ts に移行。認証やA/Bは Middleware で判定。

// app/api/health/route.ts
export function GET() { return Response.json({ ok: true }); }

ステップ6：画像/フォント/静的資産

• next/image の sizes/priority、フォントは preconnect + サブセット + swap。

ステップ7：漸進移行の運用

• ページ単位で移行→リダイレクト/リンク更新→計測で効果検証→次へ。
• フィーチャーフラグで切替し、リスクを局所化。

テスト/監視とロールバック

• E2Eで重要フローを担保。Lighthouse CI で性能回帰を検知。
• 重大不具合時は pages/ にフォールバックできる構成を維持。

チェックリスト（抜粋）

• ルーティングとレイアウト構造を定義した
• データ取得のキャッシュ方針（cache/revalidate）を決めた
• メタデータ/OGP生成を generateMetadata に移行した
• サーバーアクション/Route Handlers の採用可否を決めた
• 画像/フォント最適化を適用した
• CIでLCP/INP/CLSの閾値を設定し監視している

まとめ

「共存→ページ単位→計測とゲーティング」という順序で、安全かつ効果的に移行できます。サーバーコンポーネント前提の設計へ舵を切ることで、性能と開発体験の双方を向上できます。