Next.js 16.0〜16.2 のビルドを速くする

どんなことが起きますか

200stack は、前回のビルドで作られたキャッシュ(.next/cache)を保存し、次のビルドの前に復元しています。変更のない部分の処理を省いて、ビルドを速くするためです。

ところが Next.js 16.0〜16.2 では、Turbopack(Next.js 16 の標準のビルドツール)が next build の途中結果をキャッシュへ書き込む機能が初期設定でオフになっています。そのため、キャッシュを復元しても中身がほとんど空で、next build は毎回最初からのビルドになり、時間が短くなりません。

サイトの表示や公開される内容に問題が出るわけではありません。ビルドにかかる時間だけの話です。

おすすめの対応:Next.js 16.3 系へ上げる

Next.js 16.3 からは、next build のキャッシュ機能が初期設定でオンになりました。設定を足さなくても、200stack が復元したキャッシュがそのまま使われます。

アップデートの例です(お使いのパッケージマネージャーに合わせてください)。

# npm
npm install next@~16.3 eslint-config-next@~16.3

# pnpm
pnpm add next@~16.3
pnpm add -D eslint-config-next@~16.3

• @next/mdx など @next/ で始まるパッケージを使っている場合は、同じ版にそろえてください。
• package.json に ^16.3.x と書くと、将来 16.4 などの新しい版が入ることがあります。16.3 系に留めたい場合は ~16.3.x と書いてください。

すぐ上げられない場合:設定で有効にする(16.1・16.2)

すぐに 16.3 系へ上げられない場合の代わりとして、16.1・16.2 では next.config に次の設定を足すと、next build のキャッシュが使われるようになります。

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    turbopackFileSystemCacheForBuild: true,
  },
}

export default nextConfig

版ごとの扱い

いずれも Turbopack でビルドしている場合(Next.js 16 の初期設定)の扱いです。

どのくらい速くなりますか(目安)

当社のサイト(Next.js の静的書き出し、約 60 ページ)を 16.0 系から 16.3 系へ上げて 200stack でビルドしたところ、キャッシュがある状態の 2 回目以降の next build は、約 25〜27 秒から約 8〜10 秒になりました(約 64% 短縮)。

効果はサイトの規模や構成によって変わります。また、短くなるのは next build の部分です。依存パッケージのインストールや配信の処理などを含めた、公開までの全体の時間がそのぶん縮むとは限りません。初回のビルド(キャッシュがまだない状態)や依存パッケージを更新した直後は、これまでどおりの時間がかかります。

上げるときの注意

そのほかの 16.3 の変更点は、Next.js の公式リリースノートをご確認ください。

参考(Next.js 公式)

• turbopackFileSystemCache(設定のリファレンス)
• Next.js 16.3 リリースノート