【Next.js】Next.js 15 RC のメモ

Next.js 15 RCのブログを読んでのメモ

nextjs.org

React 19 RC

依存するReactのバージョンをReact19 RCに代えた

React Compiler (Experimental)

Reactコンポーネントの中で、useMemoやuseCallbackを使ってメモ化していたのを勝手にコードの自動最適化してくれるようになる

注意点としては

• ReactコンパイラはReactコンポーネントとフックのみをメモ化し、すべての関数をメモ化するわけではない
• Reactコンパイラのメモ化は複数のコンポーネントやフック間で共有されない

これはexoprtしたコンポーネントがメモ化されるわけではなく、importする側でpropsとかに変更がなければ以前作ったコンポーネントツリーを再度使うといことになる

導入するにはデフォルトtrueにするやり方と、next.config.jsに以下のように'annotaion'と書くことでopt-inするやり方がある

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};

ただ、これを書けば勝手にメモ化されるわけではなく、メモ化するコンポーネントには'use memo'ディレクティブを書く必要がある

ちなみに、'use memo'ディレクティブは早期導入者を支援するための一時的なものであり、将来的には消えるものらしいので注意

将来的にはデフォルトでコンパイルされるので、それまでの繋ぎようなオプション

react.dev

Hydration error improvements

エラーの内容がわかりやすくなった

Caching updates

デフォルトでキャッシュしていたのを、デフォルトではやらないようにした

fetchリクエスト、GETルートハンドラ、およびクライアントルータキャッシュのキャッシュのデフォルトを、キャッシュありからキャッシュなしに変更した

このあたりの話しは@akfmさんのブログ記事が大変参考になった zenn.dev

Incremental adoption of Partial Prerendering (Experimental)

PPRの段階的な導入

PPRは新しいレンダリング手法で表示が速くなりそうだが、設計が難しいそう

こちらも@akfmさんがわかりやすいブログを書いてくれていた zenn.dev

Executing code after a response with next/after (Experimental)

next/afterというAPIが実験的に導入された

next/afterはレスポンスのストリーミングが終了した後に処理する作業をスケジュールできるようにし、プライマリレスポンスをブロックすることなくセカンダリタスクを実行できるようにするAPI