Next.js 16: 受け入れるしかない新機能すべて
Next.js 16が落ちてきた。もちろん誰もあなたに確認なんてしない。公式ドキュメントはアップグレードガイドに全部ぶち込み、読むか、無防備のまま殴られるかの二択。宣伝文句は抜きにしよう。生き残るために飲み込む現実はこれだ。
環境: 言い訳は終了
まだNode 18?判断ミスだ。Next.js 16は 最低でもNode 20.9、TypeScript 5.1+、そしてモダンブラウザ(Chrome/Edge/Firefox 111+、Safari 16.4+)を要求する。追随できないなら15で足止め、安全性の穴も抱えたまま。我慢して。
Turbopackが標準装備に
--turbopackフラグは忘れろ。エンジンは開発もビルドもデフォルトで有効、設定はルートに昇格(experimental.turbopackではなくturbopack)。まだ独自webpackにしがみついてる?ビルドはわざと失敗するようになった。--webpackで延命はできるが、公式コースはTurbopack。開発時のディスクキャッシュもついてきて、Sassのチルダimportは終了。
HTTP APIは完全非同期へ
Next.js 15が残したcookies、headers、draftMode、params、searchParamsの同期モードは打ち切り。すべてasync、opengraph-image、twitter-image、icon、apple-iconも例外なし。古いシグネチャを握りしめてるなら、awaitをバラ撒く覚悟を。おまけにnext typegenはPageProps、LayoutProps、RouteContextを吐き出して型まみれにならずに済む。
React側: 19.2と安定化したコンパイラ
Next.js 16はReact 19.2(canary)とその取り巻きを同梱:View Transitions、useEffectEvent、Activity。さらにReact Compilerが安定オプションに昇格(reactCompiler: true)。ビルド時間はBabelが裏でトランスパイルする分だけ伸びるが、memoを手配しなくても自動メモ化が効く。
Cache Componentsと賢くなったナビゲーション
古いexperimental_pprフラグは消滅。代わりにcacheComponentsが入り、最新のPartial Pre-Renderingを有効化する。SPAの遷移はもっと手際よくプリフェッチ:レイアウトの重複排除、インクリメンタルプリフェッチ… リクエストは増えても転送量は激減。快適さが欲しかった?コードを触らず手に入る。
新キャッシュAPI: revalidateTag, updateTag, refresh
キャッシュ層が筋トレ開始:
revalidateTag(tag, cacheLife)は有効期間プロファイルを受け取り、落ち着いてリフレッシュできる。updateTag(tag)はServer Actionsにread-your-writesを即座に持ち込む。refresh()はServer Action直後にクライアントルーターをリフレッシュ。cacheLifeとcacheTagから、ようやくunstable_の烙印が消える。
今のうちにリバリデーション戦略を整理するか、ガムテープで凌いで状態崩壊を祈るか。好きにどうぞ。
middlewareは死に、proxyが名乗り出る
middleware.{js,ts}はproxyに改名。ランタイムはnodejs固定、edgeは(今のところ)退場。同様にオプションも、skipMiddlewareUrlNormalizeがskipProxyUrlNormalizeへ。ドキュメントが手取り足取り教えてくれるが、どうせ一斉リネームは避けられない。
画像: 締め付け強化
神格化されたnext/imageにもメスが入る:
- ローカル画像へのクエリ文字列には
images.localPatterns.searchが必要。 minimumCacheTTLはデフォルトで4時間に。再検証パニックを鎮めるためだ。imageSizesの16は削除、デフォルトのqualitiesは[75]に縮小、ローカルIPはdangerouslyAllowLocalIPなしではブロック。- リダイレクトは3回まで、
next/legacy/imageは退場。 images.domainsは廃止、後継はremotePatterns。
設定を放置してた?本番で驚かされる準備をしとけ。
DX: dev/buildの出力分離、ESLintは自前、スクロールはそのまま
next devとnext buildは別フォルダーに出力(devは.next/dev)し、同時起動を防ぐため相互ロック。next.configの読み込みも整理され、process.argv.includes('dev')みたいなハックは寿命切れ。
Linting界では**next lintが消滅**。素のESLint CLI(あるいは物好きならBiome)に移行し、@next/eslint-plugin-nextのflat configを受け入れるしかない。即時スクロールを強制したいなら<html>にdata-scroll-behavior="smooth"を付けろ。Next.jsはようやくCSSに口を出さない。
Alphaおまけとその他の残骸
- Build Adapters API (alpha): インフラがビルドパイプラインに口出しできる実験的フック。
- モダンSass API。
sass-loaderv16のおかげ。 - AMP、
next lint、serverRuntimeConfig/publicRuntimeConfig、怪しいdevIndicators、experimental.dynamicIO、unstable_rootParamsはゴミ箱行き。
「フルスタック・フレームワーク」が欲しいんだっけ?Next.js 16は誰が支配者か再確認させる。さっさとアップデートしろ――npm install next@latest react@latest react-dom@latest、TypeScript勢は@typesも、npx @next/codemod@canary upgrade latestも忘れずに。それが嫌なら拗ねてればいい。また次の弾で会おう。