Next.js App Routerへの移行で得た知見

はじめに

Next.js 13で導入されたApp Routerは、React Server Componentsをベースとした新しいルーティングシステムです。今回、社内プロジェクトでPages RouterからApp Routerへの移行を行った際の知見を共有します。

移行のモチベーション

Server Componentsによるバンドルサイズの削減
レイアウトのネスト対応
ストリーミングSSRによるパフォーマンス改善

ハマりポイント

1. `useRouter`のインポート元が変わる

Pages Routerでは next/router からインポートしていましたが、App Routerでは next/navigation に変わります。

// Before (Pages Router)
import { useRouter } from 'next/router';

// After (App Router)
import { useRouter } from 'next/navigation';

2. Client Componentの境界

App Routerでは、デフォルトでServer Componentとして扱われます。useState や useEffect を使う場合は、ファイルの先頭に "use client" ディレクティブが必要です。

"use client";

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. データフェッチの変更

getServerSideProps や getStaticProps はApp Routerでは使えません。代わりに、Server Component内で直接 async/await を使います。

// App Router
async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={posts} />;
}

まとめ

移行には一定の学習コストがありますが、Server Componentsの恩恵は大きいです。段階的に移行することをお勧めします。