概要
こんにちは。ニフティの山田です。
2025年10月21日に、Next.js 16がリリースされました。
https://nextjs.org/blog/next-16
大きな変更がそれなりにあるので、上記記事からピックアップしてみます。
破壊的変更点
ブラウザサポートのBaseline Widely Available基準への変更
Next.js 15からサポートブラウザが一気にバージョンアップしています。
| Chrome | Edge | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
| Next.js 15.5 | 64+ | 79+ | 67+ | 51+ | 12+ |
| Next.js 16.0 | 111+ | 111+ | 111+ | – | 16.4+ |
これは単に上がったというだけでなく、Web Platform BaselineにおけるBaseline Widely Availableへの追従の結果としてこうなっています。
https://github.com/vercel/next.js/pull/84401
Widely Availableとなる要件は、主要ブラウザで30ヶ月以上利用可能であることです。
つまり、今後のNext.jsではメジャーバージョンアップのたびに2.5年以上経過したブラウザは動作対象外となることを想定する必要があります。
古いブラウザをサポートしたければ、
- browserslistを設定してトランスパイルターゲットを変更
- next.config.jsの
transpilePackagesで、クライアント側が使うライブラリをトランスパイル対象に追加- デフォルトではnode_modules以下はトランスパイル対象外となる…
- Fastly Polyfillなどにより、トランスパイルで対応できない部分にPolyfillを追加
などの対応がより重要となってきます。特にpolyfillについて、Next.jsは独自に内蔵するpolyfillコードを使っているため、Next.jsサポート範囲外の対応には別のpolyfillコードを差し込まなければいけない点に注意が必要です。
middleware.ts → proxy.tsへの変更
middlewareの名前が変更となりました。
一般的にmiddlewareと呼ばれるものとは異なる機能であるため、わかりやすさのためにこうなったようです。
next lintコマンドの削除
以前のNext.jsではeslintコマンドではなく、next lintコマンドを利用してeslintを実行するのが推奨になっていました。eslint以外にもbiomeなどの選択肢が出てきたことから、この機能は削除となりました。今後はeslintコマンドを直接叩けばよいです。
なおNext.js 15.5の時点でdeprecatedになっていたので、そこで対応していれば問題ないはずです。
turbopackデフォルト化
バンドラとして従来使われてきたwebpackに代わり、ようやくturbopackがデフォルトとなります。
今まではturbopackを使用するのにCLIオプションが必要でした。
|
1 2 3 |
next dev --turbopack next build --turbopack |
今後はturbopackがデフォルトとなり、逆にwebpackを使いたいときにのみオプションを指定する形となります。
|
1 2 |
next dev --webpack next build --webpack |
新機能
Cache Components
今までExperimentalでPartial Pre-Rendering(PPR)やDynamicIOの名前で実装されていたものが正式版となります。
Next.js 13で導入されたApp Routerではキャッシュ制御が非常に重要になりますが、fetch()がキャッシュ機能を持つものに暗黙的に置き換わるなど予測しにくい挙動をしていました。このため、Next.js 15でキャッシュのデフォルト無効化などの変更が行われる事態が発生しています。
そこで出来たのが新しいuse cacheによるキャッシュ制御です。以下はNext.js 16公式ブログから引用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// File level 'use cache' export default async function Page() { // ... } // Component level export async function MyComponent() { 'use cache' return <></> } // Function level export async function getData() { 'use cache' const data = await fetch('/api/data') return data } |
use cacheを記述することでキャッシュを有効化します。上記にあるように、記載位置によってファイルレベル・関数レベルでキャッシュ有効化単位を制御できます。
cacheLifeなど、キャッシュ時間を制御するための仕組みも増えました。
|
1 2 3 4 5 6 7 |
'use cache' import { cacheLife } from 'next/cache' export default async function Page() { cacheLife('hours') return <div>Page</div> } |
キャッシュの仕組みを変えることになるため、現状では設定しなければ有効になりません。
|
1 2 3 4 5 |
const nextConfig = { cacheComponents: true, }; export default nextConfig; |
おそらく今後はこちらを主流にしていくのではないかと思われます。
従来のキャッシュ制御も引き続き利用可能ですが、将来的にはどこかで移行することになるでしょう。
React Compiler対応
React CompilerはReactコードの最適化機能です。
https://ja.react.dev/learn/react-compiler
ビルド時にコードを解析することでuseMemo()やuseCallback()などのメモ化コードを自動的に挿入し、レンダリングの最適化を行います。開発者はメモ化のことを意識しなくて良くなる、という機能です。
これがNext.jsでも使えるようになりました。
対応するには設定を加えたうえで
|
1 2 3 4 5 |
const nextConfig = { reactCompiler: true, }; export default nextConfig; |
React Compilerのインストールが必要となります
|
1 |
pnpm add -D babel-plugin-react-compiler |
注意点として、React Compilerはbabelプラグインとしての提供となることが挙げられます。SWCで実行されないので、ビルドが遅くなる可能性が高いことに注意が必要です。
おわりに
今回は、2025年10月21日にリリースされたNext.js 16がリリースについて解説しました。
参考になれば幸いです。
