1分で読めるNext.js 15 RCの変更点
主な変更点
React 19 RCのサポート
キャッシュの動作変更
Partial Prerendering
next/after
create-next-appのアップデート
外部パッケージのバンドル
React 19 RCのサポート
Actionsが使えるようになった
Server Actionsだけじゃなく、ClientでもActionsも使えるようになる。
React Compilerの実験的サポート
babel-plugin-react-compilerを入れて、nextConfigのexperimental.reactCompilerオプションをtrueにすると有効にできる。
npm install babel-plugin-react-compiler
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
module.exports = nextConfig;
React Compilerについての詳細はこちら
ちなみに弊社はRecoilを使っていて、RecoilがReact 19をサポートしてないので開発環境だと動かせなかった。いよいよ乗り換え先を検討しないと😇
Hydration Errorの改善
Next.js 14.1でも表示が改善されていたけど、Next.js 15 では更にHydration Errorも見やすくなっている。
Cacheの動作変更
fetchリクエスト、GET Route Handlers、クライアントナビゲーションのキャッシュがデフォルトで無効になった。
Partial Prerendering
段階的に採用するための設定オプションが追加された。
nextConfigのexperimental.pprオプションをincrementalにして、Page or Layoutにexperimental_pprを追加すれば、特定のページ or レイアウト毎にPPRを適用できる。
const nextConfig = {
experimental: {
ppr: 'incremental',
},
};
module.exports = nextConfig;
export const experimental_ppr = true
next/after
レスポンスのストリーミングが完了した後に非同期でコードを実行してくれる機能。nextConfigのexperimental.afterをtrueにして有効にできる。特にロギングなどで使えそう。
const nextConfig = {
experimental: {
after: true,
},
};
module.exports = nextConfig;
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
export default function Layout({ children }) {
// セカンダリタスク
after(() => {
log();
});
// プライマリタスク
return <>{children}</>;
}
create-next-appのアップデート
local開発でTurbopackを有効にできるオプションが追加された。
最小構成でプロジェクトを作れる--empty フラグが追加された。
外部パッケージのbundle最適化
App RouterとPages Routerの設定を統一するために、新しいbundlePagesRouterDependenciesオプションが導入されたりしてる。