v16
2025年10月Turbopackが既定のバンドラに、キャッシュが“明示的(use cache)”に。middlewareはproxyに改称され、Reactコンパイラ対応も安定化しました。
Turbopack が既定のバンドラに(安定版)
新しいバンドラ Turbopack が開発・本番ビルドともに安定し、新規プロジェクトの既定になりました。本番ビルドが2〜5倍、Fast Refresh(保存時の反映)が最大10倍速くなります。
従来のwebpack構成を使い続けたい場合は next dev --webpack / next build --webpack で切り替えられます。
Cache Components: 明示的なキャッシュ(use cache)
これまでのApp Routerは「いつの間にかキャッシュされる」挙動が分かりにくいという声がありました。Next.js 16 ではキャッシュが完全にオプトイン(明示的)になり、既定では動的コードはリクエスト時に実行されます。
キャッシュしたいページ・コンポーネント・関数には "use cache" ディレクティブを付けます。コンパイラがキャッシュキーを自動生成します。next.config.ts で cacheComponents: true を設定して有効化します。これは部分的事前レンダリング(PPR)の完成形でもあります。
// next.config.ts
const nextConfig = {
cacheComponents: true,
};
export default nextConfig;
// キャッシュしたい関数に "use cache" を付ける
async function getProducts() {
"use cache";
return db.query("SELECT * FROM products");
}middleware.ts が proxy.ts に改称
リクエストを横取りする middleware.ts は proxy.ts に名前が変わりました。「ネットワークの境界(入口)」であることを明確にするためで、Node.jsランタイムで動きます。
やることはファイル名を proxy.ts に、export する関数名を proxy に変えるだけで、中のロジックはそのままです。middleware.ts も当面は使えますが非推奨です。
// proxy.ts (旧 middleware.ts)
export default function proxy(request: NextRequest) {
return NextResponse.redirect(new URL("/home", request.url));
}Reactコンパイラ対応の安定化と新キャッシュAPI
Reactコンパイラ対応が安定化しました。reactCompiler: true で有効にすると、コンポーネントの再レンダリングを自動で最適化(自動メモ化)できます。
キャッシュ操作APIも整理され、updateTag()(変更を即座に反映する“自分の書き込みを読む”用)や refresh()(キャッシュ外のデータだけ更新)が追加。revalidateTag() は cacheLife プロファイルを第2引数に取る形になりました。
主な破壊的変更(移行時の注意)
params / searchParams、cookies() / headers() / draftMode() が非同期になり、await して使う必要があります。next/image の既定値もいくつか変わりました(画質の既定が75など)。
AMPサポートと next lint コマンドは削除されました。最低要件も上がり、Node.js 20.9以上・TypeScript 5.1以上が必要です。移行は npx @next/codemod@canary upgrade latest で自動化できます。
// 16 では params / searchParams は Promise になった
export default async function Page({
params,
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params; // await が必要
return <div>{id}</div>;
}