Next14.2がリリースされたので読んでみます。
翻訳ベースで気になったものをつまんでメモしてます。
TL;DR
目玉はTurbopackが開発サーバーでの安定稼働できるようになったこと
今回のリリース内容
- 開発用Turbopack（リリース候補）：99.8%のテストが
next dev --turboに合格 - ビルドと本番環境の改善：ビルド時のメモリ使用量の削減と CSS の最適化
- キャッシュの改善：
staleTimes(Experimental)で無効期間を設定可能 - エラーDXの改善：ハイドレーションエラーの改善とデザインの更新
下記コマンドで14.2を使用できる
npx create-next-app@latest
Turbopack for Development (Release Candidate)
- 統合テストの99.8％が合格
- Next.jsアプリケーションでよく使われる上位300のnpmパッケージのコンパイルがTurbopackで可能
- すべてのNext.js examplesがTurbopackで動作
- Rustで書かれた高速なCSSバンドラーおよび最小化ツール、Lightning CSSを統合
統合テストの99.8％が合格
下記サイトで確認できる
ローカル開発ではもうほぼ統合テストは終了してる
右上の環境を本番にすると、執筆時(2024/04/15)では74.7%のため、まだビルドはできなそう。
開発サーバーとしての利用では使える。
すべてのNext.js examplesがTurbopackで動作
Next.jsのリポジトリにテンプレート集があり、それらすべてTurbopackで動いた
examplesリポジトリ
ドッグフーディング
vercel社自身がTurbopackを使い続け改良をかせねてvercel.comを例に挙げると、以下の改善がみられた
- ローカルサーバーの起動が最大76.7%高速化
- 高速リフレッシュにより、コード更新が最大96.3%高速化
- キャッシュを使用しない場合の初期ルートコンパイルを最大45.8%高速化(Turbopackにはまだディスクキャッシュがありません)
使用方法
14.2より前の時と同じくオプトインで使用する
next dev --turbo
これから
先ほどの画像からまだ本番では使えないためnext build --turboができるようにしたり、メモリ使用量の改善、永続的キャッシングの実装に注力していく
- メモリ使用量の改善
- 永続的キャッシング
- ビルドプロセスの高速化
next build --turbo
Turbopackでサポートされてる機能とサポートされてない機能はまとめてるので公式ドキュメントを参照すること。
Build and Production Improvements
- Tree-shaking
- ビルドメモリ使用量
- CSS
Tree-shaking
サーバーコンポーネントとクライアントコンポーネントの間の境界で未使用のエクスポートを削除する最適化を実現した。（= 使ってないものは削除することでバンドルサイズを削減）
react-aria-componentsという人気のライブラリで最終バンドルサイズが-51.3%削減することができた。
(注意) barrel fileではまだ使えない。next.config.jsのオプションのoptimizePackageImportsで現状は対策する。
ビルドメモリ使用量
コンパイラを最適化させてビルドに使用するメモリ使用量を減らした。
ビルド時のメモリ使用量を知りたいときは、next buildするときに--experimental-debug-memory-usageフラグをつけると確認できる。詳細は公式ドキュメントで確認する。
CSS
CSSをチャンクさせることで、コンフリクト起きてたものを解消させるようにした。
Caching Improvements
-
staleTimes(Experimental) - Parallel and Intercepting Routes
staleTimes (Experimental)
主に<Link>コンポーネントに関わってくる話。
<Link>コンポーネントはデフォルトで30秒キャッシュして、prefetchプロパティをtrueにすると5分間キャッシュされる、という動きであった。
これをstaleTimesフラグを使用すると、カスタムすることができるようになった。
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
};
module.exports = nextConfig;
Errors DX Improvements
ハイドレーションエラーについて、エラーメッセージが読みやすくなるように改善された。
これが
こうなる
終わり
目玉はリリース候補ですがTurbopackが開発サーバーでの安定稼働ですね。
大きな機能追加というよりかは、最適化、改善あたりが主題という感じでした。