🔖
ビルド速度が劇的に向上した Next.js@16 と React Routerとのビルド速度と比較する
Next.js@16 の登場
2025/10/21 にNext.js 16がリリースされました。ビルド速度が向上したとのことなので早速確認してみます。
ビルドに使うリポジトリ
マークダウンエディタの作り方を解説する記事で使っていた、ほぼ同じ動作をするコードをNext.js用とReact Router用で利用しています。
測定結果
手元の環境でビルドさせてみた結果
Next.js は React Router のビルドと同じ条件になるようにignoreBuildErrors: trueを追加して、TypeCheck を省いています。lint を行わないというオプションは廃止され、最初から無効になっているようです。
| フレームワーク | バージョン | バンドラ | 速度 |
|---|---|---|---|
| Next.js | 16.0.0 | turbopack | 6.61s |
| Next.js | 16.0.0 | webpack | 19.66s |
| Next.js | 15.5.3 | turbopack | 12.88s |
| Next.js | 15.5.3 | webpack | 16.72s |
| React Router | 7.8.2 | rolldown-vite(NativePlugin) | 3.03s |
| React Router | 7.8.2 | rolldown-vite | 4.16s |
| React Router | 7.8.2 | vite | 5.19s |
- Next.js のビルド
- React Router のビルド
まとめ
Next.js が React Router のビルド速度にだいぶ近づいてきました。ただ、webpack を指定すると以前より遅くなるという謎の挙動なので、互換性重視で Next.js を webpack でビルドする場合は気をつけてください。
Discussion