nextjs16-skills

リンク

• ドキュメント：https://nextjs.org/docs
• アップグレードガイド（v16）：https://nextjs.org/docs/app/guides/upgrading/version-16
• リリースノート／ブログ：https://nextjs.org/blog/next-16

アップグレード

# Automated upgrade
npx @next/codemod@canary upgrade latest

# Manual upgrade
npm install next@latest react@latest react-dom@latest

# New project
npx create-next-app@latest

Codemod の主な対応内容：Turbopack の設定を移動し、next lint を ESLint CLI に移行し、middleware を proxy に移行し、一部の unstable_ プレフィックスを削除し、ルート単位の experimental_ppr を削除します。

TypeScript：@types/react と @types/react-dom もアップグレードしてください。

新機能（v16）

• Cache Components：「use cache」ディレクティブによるオプトイン方式のキャッシュ機能です。PPR を発展させ、取り込みます。
• Next.js DevTools MCP：AI を活用したデバッグのための Model Context Protocol 統合です。
• proxy.ts：ネットワーク境界をより明確にします。middleware.ts はほとんどの用途で非推奨になりました。
• ログ／メトリクスの改善：next dev とビルドのタイミング情報がより詳細になりました。

パフォーマンス／開発体験

• Turbopack：安定版になり、デフォルトのバンドラーになりました（next dev --webpack、next build --webpack でオプトアウトできます）。
• カスタムの webpack 設定がある場合、誤設定を防ぐために next build が失敗することがあります。設定を移行する、next build --webpack を使う、または Turbopack を使って webpack 設定を削除／無視することで解決できます。
• Turbopack の設定が移動しました：next.config.* の experimental.turbopack → トップレベルの turbopack。
• Turbopack 移行時の注意点：
  • Sass のインポート：Webpack 専用の ~ プレフィックスを削除してください（例：@import 'bootstrap/...';）。
  • ブラウザーバンドルから Node の組み込みモジュール（例：fs）をインポートすることはできません。避けられない場合は、一時的な回避策として turbopack.resolveAlias を使ってください。
• Turbopack ファイルシステムキャッシュ（開発、ベータ版）：experimental.turbopackFileSystemCacheForDev: true。
• React Compiler のサポート：reactCompiler: true でオプトインすると安定版で利用できます（ビルド／コンパイルのコストが高くなることが予想されます）。
• Build Adapters API：アルファ版（カスタムビルドアダプター）。
• ルーティング／プリフェッチの書き換え：レイアウトの重複排除と段階的なプリフェッチ。

キャッシュ API（主なシグネチャ）

• revalidateTag(tag, profile) は、SWR 動作のためにキャッシュライフプロファイル（または { expire }）が必須になりました。
• updateTag(tag)（Server Actions のみ）：書き込み後の読み取りセマンティクスを提供します。
• refresh()（Server Actions のみ）：キャッシュされていないデータを更新します。キャッシュは変更しません。
• cacheLife と cacheTag は安定版です（unstable_ プレフィックスはありません）。

要件（v16）

• Node.js：20.9 以降（Node 18 はサポート対象外）
• TypeScript：5.1 以降
• ブラウザー：Chrome／Edge／Firefox 111 以降、Safari 16.4 以降

破壊的変更／動作の変更（影響大）

• 非同期 Request API：同期アクセスは削除されました。await params、await searchParams、await cookies()、await headers()、await draftMode() を使ってください。
• ヒント（TypeScript）：npx next typegen を実行すると、PageProps、LayoutProps、RouteContext などのヘルパーを生成でき、params/searchParams の型を安全に移行できます。
• メタデータ画像：画像関数で opengraph-image、twitter-image、icon、apple-icon が受け取る params（および id）は、Promise になりました。
• サイトマップ：generateSitemaps を使う場合、sitemap({ id }) が受け取る id は Promise になりました。
• 並列ルート：スロットには明示的な default.js が必要です。
• next/image のデフォルト値が変更されました（キャッシュ TTL、サイズ／品質）。クエリー文字列付きのローカル src には images.localPatterns が必要です。

その他の注目すべき動作の変更：

• next dev と next build は別々の出力ディレクトリを使います（next dev → .next/dev）。また、ロックファイルによって複数インスタンスの同時実行が防止されます。
• スクロール動作：ナビゲーション中に Next.js がグローバルな scroll-behavior: smooth を上書きすることはなくなりました。以前の上書き動作に戻すには、<html> に data-scroll-behavior="smooth" を追加してください。
• ESLint：@next/eslint-plugin-next はデフォルトで ESLint Flat Config を使います。従来の .eslintrc を使うプロジェクトでは移行が必要になる場合があります。

削除・非推奨（概要）

• 削除：AMP のサポート、next lint（ESLint/Biome を直接使用してください）、next.config.* の eslint オプション、serverRuntimeConfig/publicRuntimeConfig（環境変数を使用してください）、experimental.ppr とルートレベルの experimental_ppr、unstable_rootParams。
• 非推奨：middleware.ts というファイル名（proxy.ts を推奨）、next/legacy/image、images.domains（images.remotePatterns を推奨）、revalidateTag(tag) の単一引数形式。
• proxy.ts に関する注意：proxy は nodejs でのみ実行されます。proxy では Edge ランタイムはサポートされていません。Edge を使い続ける必要がある場合は、middleware.ts を使用してください。
• 設定名の変更例：skipMiddlewareUrlNormalize → skipProxyUrlNormalize。