Next.js 14.2を読んでみる

Next14.2がリリースされたので読んでみます。
翻訳ベースで気になったものをつまんでメモしてます。

### TL;DR
目玉はTurbopackが開発サーバーでの安定稼働できるようになったこと

### 今回のリリース内容
- 開発用Turbopack（リリース候補）：99.8%のテストが`next dev --turbo` に合格
- ビルドと本番環境の改善：ビルド時のメモリ使用量の削減と CSS の最適化
- キャッシュの改善：`staleTimes` (Experimental)で無効期間を設定可能
- エラーDXの改善：ハイドレーションエラーの改善とデザインの更新

下記コマンドで14.2を使用できる
```zsh:Terminal
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％が合格
下記サイトで確認できる

https://areweturboyet.com/

ローカル開発ではもうほぼ統合テストは終了してる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/9abb45f9-1f64-d13b-154f-b5e42d09c6b5.png)
右上の環境を本番にすると、執筆時(2024/04/15)では74.7%のため、まだビルドはできなそう。
開発サーバーとしての利用では使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/26e2913f-050f-8eef-2f06-782f42d52ec6.png)

#### すべてのNext.js　examplesがTurbopackで動作
Next.jsのリポジトリにテンプレート集があり、それらすべてTurbopackで動いた

https://github.com/vercel/next.js/tree/canary/examples

examplesリポジトリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/dd61e805-d805-faee-aae2-79720355f10b.png)

#### ドッグフーディング
vercel社自身がTurbopackを使い続け改良をかせねてvercel.comを例に挙げると、以下の改善がみられた
- ローカルサーバーの起動が最大76.7%高速化
- 高速リフレッシュにより、コード更新が最大96.3%高速化
- キャッシュを使用しない場合の初期ルートコンパイルを最大45.8%高速化(Turbopackにはまだディスクキャッシュがありません)

#### 使用方法
14.2より前の時と同じくオプトインで使用する
```zsh:zsh
next dev --turbo
```

#### これから
先ほどの画像からまだ本番では使えないため`next build --turbo`ができるようにしたり、メモリ使用量の改善、永続的キャッシングの実装に注力していく
- メモリ使用量の改善
- 永続的キャッシング
- ビルドプロセスの高速化 `next build --turbo`

Turbopackで[サポートされてる機能](https://nextjs.org/docs/architecture/turbopack#supported-features)と[サポートされてない機能](https://nextjs.org/docs/architecture/turbopack#unsupported-features)はまとめてるので[公式ドキュメント](https://nextjs.org/docs/architecture/turbopack)を参照すること。


### Build and Production Improvements
- Tree-shaking
- ビルドメモリ使用量
- CSS

#### Tree-shaking
サーバーコンポーネントとクライアントコンポーネントの間の境界で未使用のエクスポートを削除する最適化を実現した。（= 使ってないものは削除することでバンドルサイズを削減）
`react-aria-components`という人気のライブラリで最終バンドルサイズが-51.3%削減することができた。
(注意) barrel fileではまだ使えない。`next.config.js`のオプションの[`optimizePackageImports`](https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports)で現状は対策する。

#### ビルドメモリ使用量
コンパイラを最適化させてビルドに使用するメモリ使用量を減らした。
ビルド時のメモリ使用量を知りたいときは、`next build`するときに`--experimental-debug-memory-usage`フラグをつけると確認できる。詳細は[公式ドキュメント](https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage)で確認する。

#### CSS
CSSをチャンクさせることで、コンフリクト起きてたものを解消させるようにした。

### Caching Improvements
- `staleTimes` (Experimental)
- Parallel and Intercepting Routes

#### `staleTimes` (Experimental)
主に`<Link>`コンポーネントに関わってくる話。
`<Link>`コンポーネントはデフォルトで30秒キャッシュして、`prefetch`プロパティを`true`にすると5分間キャッシュされる、という動きであった。
これを`staleTimes`フラグを使用すると、カスタムすることができるようになった。

```javascript:next.config.js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;
```

### Errors DX Improvements
ハイドレーションエラーについて、エラーメッセージが読みやすくなるように改善された。
これが
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/ebd4d540-53d3-e0b0-fe87-4cc61b387967.png)

こうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/c2ebad3a-6146-3cd6-f0b4-9c3ba2836303.png)

### 終わり
目玉はリリース候補ですがTurbopackが開発サーバーでの安定稼働ですね。
大きな機能追加というよりかは、最適化、改善あたりが主題という感じでした。