こんにちは!
株式会社Sally エンジニアの haruten です♪
私たち株式会社Sallyでは、マーダーミステリーをスマホやPCで遊べるアプリ「ウズ」や、マーダーミステリーを制作してウズ上で公開・プレイできるエディターツール「ウズスタジオ」などを開発・運営しています。
はじめに
Next.js 16 が2025年10月にリリースされました。メジャーバージョンアップということで、Breaking Changes も多いのでは...と身構えていましたが、全体的に意外とすんなり移行できました。
とはいえ、いくつか詰まった点もあったので、その備忘録です。
前提
v15.5.4 → v16.0.1 へのバージョンアップ
Next.js 16 の主な変更点
まず、Next.js 16 で何が変わったのか簡単におさらいします：
1. middleware.ts → proxy.ts へ
middleware.ts が proxy.ts に置き換わりました。
2. Turbopack が正式版に
Webpack の後継とされていた Turbopack が正式にデフォルトのバンドラーになりました。
3. その他
- Cache Components（PPR と use cache）
- レイアウト重複排除
- React 19.2 サポート
この辺りも重要な変更点ですが、今回の弊社プロダクトのアップデートでは特に問題にならなかったため割愛します。
詳細は 公式ブログ をご覧ください。
実際の修正点
1. middleware.ts → proxy.ts
middleware.ts が proxy.ts に変更されました。
私たちのプロダクトでは、ファイル名とexport関数名を変更するだけで問題なく動きました。
2. Turbopack 移行で Webpack の externals が使えなくなった
これが一番詰まった点です。
私たちのプロジェクトでは、Konva（Canvas ライブラリ）を使っており、canvas モジュールを external として扱う必要がありました。
canvasはNode.js用モジュールですが、ブラウザでは不要です。しかし、Konvaの依存関係として参照されるため、ビルド時にエラーが発生します。そのため、externals（Webpack）で除外する必要がありました。
変更前（Webpack）
// next.config.js
module.exports = {
webpack: (config) => {
config.externals = [...config.externals, { canvas: 'canvas' }];
return config;
},
};
しかし、Turbopack ではもちろん webpack 関数が動作しません。
解決策：resolveAlias を使う
Turbopack では、resolveAlias を使って代替モジュールを指定できます。
// next.config.js
module.exports = {
// Turbopack用の設定
turbopack: {
resolveAlias: {
canvas: './empty-module.js', // ダミーモジュール
},
},
};
empty-module.js はビルドエラーを回避するための空のファイルです：
// empty-module.js
module.exports = {};
これで Konva が正しく動作するようになりました。
Turbopack でビルドはどれくらい速くなったか
移行後、弊社の「ウズスタジオ」をサンプルに実際に本番環境(Vercel)のビルド時間を計測してみました。
- Before (Webpack): 約 5分 56秒
- After (Turbopack): 約 2分 45秒
- 結果: 約 54% 削減
他プロダクトにおいても程度の差はありましたが、ビルド時間は減少傾向にありました。
公式が謳っている「2〜5倍高速化」ほどではありませんでしたが、Turbopackに移行するメリットはまあありそうかなと言うところでした。
まとめ
Next.js 16 へのバージョンアップは、いくつか詰まる点はあったものの、全体的にはスムーズでした。
Turbopack による高速化の恩恵もあり、アップデートして良かったと感じています。
この記事が皆さんのお役に立つと嬉しいです！
最後まで読んでいただきありがとうございました！
Discussion