Next.js 16がリリース、新機能まとめ

10月21日に、Next.js 16が正式リリースされましたね。
さて、ではどこが変わったのでしょう？

この記事では、Next.js 16の新機能をまとめていきます。

Next.js 16　新機能

1.デフォルトでTurbopackが有効に

Next.js 16から、Turbopackは安定化され、next devおよびnext buildでデフォルトで使用されます。
Next.js16ドキュメント

このバージョンからnext dev / next buildが自動でTurbopackを使用するようになりました。
以前まで必要だった--turbopackが不要となったということですね。

Before

package.json

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

After

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

ただし、プロジェクトに独自のWebpack設定が残っているとビルドが失敗します。

対処法としては：

1. Turbopackを使う： next build --turbopack
2. Turbopackへ移行する： webpack 設定を削除 or Turbopack 用設定へ移行
3. Webpackを使い続ける：next build --webpackを使ってオプトアウト

本番だけWebpackを使いたい場合：

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build --webpack",
    "start": "next start"
  }
}

まぁ、

開発と本番の両方でTurbopackを使用することをお勧めします。

とは書いてあるので大人しく従ったほうが良さそうですね...

そして、Turbopack設定は正式化され、experimentalではなく、トップレベルのturbopackに書くようになりました。

Before

next.config.ts

import type { NextConfig } from 'next'
 
// Next.js 15 - experimental.turbopack
const nextConfig: NextConfig = {
  experimental: {
    turbopack: {
      // オプション
    },
  },
}
 
export default nextConfig

After

next.config.ts

import type { NextConfig } from 'next'
 
// Next.js 16 - nextConfigのトップレベルのturbopack
const nextConfig: NextConfig = {
  turbopack: {
    // オプション
  },
}
 
export default nextConfig

また、Sassの~インポートが非対応になりました。（Turbopack）

Turbopackでは、Webpackが許可していた~プレフィックス付きのSassインポートが使えません。

// Webpack（従来）
- @import '~bootstrap/dist/css/bootstrap.min.css';
// Turbopack（Next.js 16）
+ @import 'bootstrap/dist/css/bootstrap.min.css';

インポートを書き換えられない場合の救済

next.config.tsのturbopack.resolveAliasを使って~を無視させることも可能。

next.config.ts

const nextConfig = {
  turbopack: {
    resolveAlias: {
      '~*': '*'
    }
  }
}

Turbopack のファイルシステムキャッシュ（β）

このバージョンのTurbopackには、開発時の再起動を高速化するファイルシステムキャッシュが追加されまじた。
ビルド結果をディスクに保存しておくため、開発サーバーの再起動後もコンパイルが速くなります。

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
}
 
export default nextConfig

2.リクエスト系 API が完全に非同期化されました。

Next.js 16では、今まで同期で参照できていたcookies、headers、draftMode、params、searchParamsなどが すべて非同期 APIに統一されました。

つまり、今まで当たり前に書けていたこのパターンが…

Before（同期）

/app/blog/[slug]/page.tsx

export default function Page({ params }) {
  const slug = params.slug
  return <div>{slug}</div>
}

Next.js 16では使えません。

After（非同期）

/app/blog/[slug]/page.tsx

export default async function Page(props) {
  const { slug } = await props.params
  return <div>{slug}</div>
}

特にparamsとsearchParamsの扱いは影響が大きいので、
Next.js 15 からそのまま上げる場合はここでハマりやすいです。

型安全に移行したいなら typegen を使う。

Next.js 16では、新しく型生成コマンドが追加されています。

npx next typegen

これを実行すると、以下のような型付きのPropsを自動で生成してくれます：

import { PageProps } from 'next'

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const q = await props.searchParams
  return <div>{slug}</div>
}

ルートごとの型を IDE が理解してくれるので、
「slugないやん！」みたいな事故も減ります。

ページだけじゃなく、画像生成・OGP・アイコンでも非同期化。

このバージョンの変更はページだけではなく、
OGP（generateImageMetadata）・アイコン生成（generateIcon）・静的画像生成などにも影響します。

import type { StaticImageParams } from 'next'

export default async function generateImageMetadata({
  params,
}: {
  params: Promise<StaticImageParams<'/blog/[slug]'>>
}) {
  const { slug } = await params
  // …
}

ここもprops や params を await しないと動かないので注意。

3.React 19.2 への対応

このバージョンのApp Routerは、最新の React カナリアビルドをベースにしており、リリースされたReact 19.2の主要機能がそのまま利用できます。
特に今回のアップデートでは UI の動きに関係する部分が強化されています。

• ビューの遷移
  トランジションやナビゲーション時に特定の要素を滑らかにアニメーションさせられる仕組み。

• useEffectEvent
  エフェクト内の “リアクティブじゃない処理” を関数として切り出して再利用できるようにする API。
  不必要な依存関係の発火を防げるようになりました。

• アクティビティ（Activities）
  UI を display: none で見えなくしたまま状態を保持し、背景で継続させられる仕組み。
  タブ的な UI と相性が良いです。

React コンパイラー（安定化）

Next.js 16では、React Compilerのサポートが安定版に昇格しました。

React Compiler は、コンポーネントを自動的にメモ化してくれるため、
開発者がuseMemo/useCallbackを手書きしなくても不要な再レンダリングを自動削減してくれます。

ただし...

• デフォルトではまだ無効
• バベル依存のため、開発時・ビルド時のコンパイルは遅くなることがある

という点も押さえておきたいポイントです。

有効化するには
next.config.tsにreactCompiler: trueを追加します。

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: true
}

export default nextConfig

React Compiler のバベルプラグインも必要です：

npm install -D babel-plugin-react-compiler

4.next/image の大幅アップデート

今回のバージョンは next/image がめちゃくちゃ変わったので、ここは押さえておくべきポイント。

クエリ付きローカル画像は next.config が必須に

Next.js 16 から、?v=1 のような検索パラメータ付きのローカル画像を使う場合、
localPatterns の設定を追加しないとビルドエラーになります。

Before（Next.js 15）

<Image src="/images/photo.png?v=1" width={300} height={300} />

After（Next.js 16）

// next.config.ts
const nextConfig = {
  images: {
    localPatterns: [
      { pathname: '/images/**', search: '?v=1' }
    ]
  }
}

minimumCacheTTL がデフォルト 4時間に

• Next.js 16 から 画像のキャッシュ再検証が4時間に変更
• 更新頻度が高いサイトなら手動で60秒などに戻す必要あり

images: {
  minimumCacheTTL: 60
}

imageSizes のデフォルトから 16px が削除

サムネイル用途など、必要なら手動で追加。

images: {
  imageSizes: [16, 32, 48, 64, 96, 128]
}

remotePatterns を使うのが推奨に（domains は非推奨へ）

より細かく制御できる remotePatterns を使う形へ移行します。

5.middleware が proxy に名称変更（重要）

Next.js 16では、既存のmiddleware.tsは非推奨になり、
代わりに proxy.ts を使うようになりました。

// proxy.ts
export function proxy(req: Request) {
  // rewrite / redirect / header 書き換えなど
}

• 役割は middleware とほぼ同じ
• Node.js ランタイムのみ対応（Edgeは非対応）

既存プロジェクトで middleware.ts を使っている場合はリネーム必須です。

6.PPR（部分的プリレンダリング）が標準化

Next.js 15 では experimental だった PPR（Partial Prerendering） が
Next.js 16 で正式化されました。

• experimental_ppr は削除
• 新しく cacheComponents: true を使います

const nextConfig = {
  cacheComponents: true
}

PPR を使うことで、ページの静的部分だけ先に返して、
動的部分はストリーミングで後から読み込むことができます。

7.開発環境の出力ディレクトリ変更

Next.js 16 から next dev は .next/dev に出力されるように変更されました。

• next build → .next
• next dev → .next/dev

これによって
「dev ビルドが本番ビルドのキャッシュを壊す問題」 が解消されます。

8.Parallel Routes に default.js が必須化

Parallel Routes（@modal など）を使っている場合、
Next.js 16 では 必ず default.tsx が必要になりました。

// app/@modal/default.tsx
export default function Default() {
  return null
}

ないとビルドで確実に落ちます。

9.サーバーアクション周りの変更

Next.js 16 では、サーバーアクションの挙動がより明確に。

• revalidateTag
• updateTag
• refresh

が明確に使い分けられるようになりました。

revalidateTag

→ 背景で静的データを再計算（遅延OK）

updateTag

→ UIに即時反映したい場合（ユーザープロフィール更新など）

refresh

→ クライアント側の全体更新（router.refresh の代替）

'use server'
import { updateTag } from 'next/cache'

export async function updateUser(id: string, data: any) {
  await db.update(id, data)
  updateTag(`user-${id}`)
}

10.その他（でも実用的に大事）

■ build / dev の依存関係チェックが厳密化

古い plugin や webpack 設定が残ってるとすぐ落ちる。
React Compiler 併用時は特に注意。

■ Node.js は 18.18.0 以上が必須

古い LTS の 16 系は完全に終了。

Next.js 15→16、移行チェックリスト

• next dev / next build の --turbopack 削除
• next.config の experimental.turbopack → turbopack に移行
• Sass の ~ インポート削除 or resolveAlias 追加
• Request APIs を async 化（params / searchParams など）
• middleware.ts → proxy.ts にリネーム
• Parallel Routes に default.tsx 追加
• next/image の localPatterns 設定
• Node.js 18.18.0+ にアップデート

まとめ

Next.js 16 は「内部の刷新」が大幅に進んだバージョンで、
特に Turbopack・リクエストAPI・next/image・middleware → proxy この4つは確実に影響します。