SoSoraEndo2025年5月6日2 min233 字
背景
Pages Router で安定していたサイトの一部を、Next.js 16 の App Router に置き換えてみました。RSC（React Server Components）の境界をどこに引くかで、考えることがだいぶ変わります。
実装してみた感触
- RSC は「データ取得 + マークアップ」の層として固定すると迷わない
- クライアントで状態を持つコンポーネントは
use clientで明示 generateMetadataを使うと、<Head>を意識せずに SEO が宣言的に書ける
export async function generateMetadata({ params }) {
const post = await fetchPost(params.slug);
return { title: post.title, description: post.excerpt };
}
ハマったところ
- クライアント境界をまたぐ Context は noop になる
cookies()/headers()の呼び出しが Promise 化していて、async ハンドリングを再考する場面が多い
まとめ
App Router は「ページ単位ではなく境界単位で考える」設計が肝。Pages Router 派の人は、まず1ページだけ移植してみると、移行コストの感覚が掴めます。