はじめに

HTNCodeです。ありがたいことに案件のご相談等も引き続きいただき忙しくしており、ブログの方がご無沙汰となっておりました。
久しぶりの台風直撃、という感じでしたが、皆様大丈夫でしたか？？無事を祈ります。。
　

React19、もう夏が終わっちゃいますがまだ出ないのかな？？って思ってる方、いませんか？？楽しみですよね。
Next.js CONF24が10月なので、10月には新機能も含めてどんどん発表されそうで、余計に楽しみです。
さて今日は、そんなお楽しみを秋に持ち越しつつ、今更ながらNext.js 15 RC版が登場しているので、何が変わるのかについてまとめてみます。
　

Next.js15 RCへのアップグレード

Next.js 15 RCへアップグレードするには、以下のいずれかのコマンドを使用します。
お使いのパッケージマネージャーに応じて、適切なコマンドを実行してください。

注意点として、正式リリースされるまでの間は警告が出るので、--forceまたは--legacy-peer-depsオプションを付けてね、と公式サイトに書いてあります。

・ピアデペンデンシーに関する警告が表示された場合は、ReactおよびReact DOMのバージョンを更新するか、--forceまたは--legacy-peer-depsを使用して警告を無視することができます。Next.js 15とReact 19が安定版になると、この操作は不要となります。
・TypeScriptを使用している場合は、Reactの型を一時的に上書きする必要があります。詳細については、React 19 RCのアップグレードガイドを参照してください。

// npmの場合
npm i next@rc react@rc react-dom@rc eslint-config-next@rc

// yarnの場合
yarn add next@rc react@rc react-dom@rc eslint-config-next@rc

// pnpmの場合
pnpm up next@rc react@rc react-dom@rc eslint-config-next@rc

// bunの場合
bun add next@rc react@rc react-dom@rc eslint-config-next@rc

変更点

では、変更点についてまとめていきます。内容は公式サイトの通りですので、きちんと確認したい方は公式サイトをご確認ください。

■Next.js Version 15

https://nextjs.org/docs/app/building-your-application/upgrading/version-15

1. Reactの最小バージョンの変更

いよいよお待ちかねの、ReactおよびReact DOMの最小バージョンが19に引き上げられます。

2. キャッシュ管理方針の変更

Next.js 15からは、fetchリクエストがデフォルトでキャッシュされなくなります。より意識してキャッシュ戦略を立て、開発することになりますね。

　
特定のリクエストをキャッシュさせるには、cache: 'force-cache'オプションを設定します。

export default async function RootLayout() { 
    const a = await fetch('https://example.com') // キャッシュなし
    const b = await fetch('https://example.com', { cache: 'force-cache' }) // キャッシュあり
}

また、レイアウトやページ全体でキャッシュを適用する場合には、export const fetchCache = 'default-cache'を使用します。

export const fetchCache = 'default-cache'

export default async function RootLayout() {
    const a = await fetch('https://example.com') // キャッシュあり
    const b = await fetch('https://example.com', { cache: 'no-store' }) // キャッシュなし
}

3. ルートハンドラーのGET関数も同じく

さらに、ルートハンドラー内のGET関数もデフォルトではキャッシュされなくなります。
GETメソッドをキャッシュするには、export const dynamic = 'force-static'を設定します。

export const dynamic = 'force-static' export async function GET() {
    ....
}

4. クライアントサイドのルーターキャッシュは？

<Link>やuseRouterを使用したページ遷移時には、ページセグメントがクライアントサイドのルーターキャッシュから再利用されなくなります。
ただし、ブラウザの戻る・進むナビゲーションや共有レイアウトでは、引き続き再利用されます。

ページセグメントのキャッシュを有効にするには、staleTimes設定を使用します。

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        staleTimes: {
            dynamic: 30,
            static: 180,
        },
    },
}

module.exports = nextConfig

5. next/fontパッケージの統合

@next/fontパッケージは廃止され、組み込みのnext/fontが使用されるようになります。既存のインポートを変更するには、以下のようにします。

// 変更前
import { Inter } from '@next/font/google'

// 変更後
import { Inter } from 'next/font/google'

6. その他の変更

・experimental.bundlePagesExternalsは安定版となり、bundlePagesRouterDependenciesという名称に変更されます。

・experimental.serverComponentsExternalPackagesも安定版となり、serverExternalPackagesに名称変更されます。

7. Speed Insightsの自動計測の削除

Speed Insightsの自動計測機能が今まであったそうですが、これがNext.js 15で削除されます。
引き続きSpeed Insightsを使用する場合は、VercelのSpeed Insights Quickstartガイドを参考に、とのこと。
Vercelの管理画面内にはずっとありましたもんね。そっちに集約するということなのでしょう。

おわりに

今のところ公式にあるものはここまでのようですが、react19含めてまた記事にできればと思います。

それではまた。

HTNCode