Next.jsは進化を続け、より速く効率的なウェブアプリケーション開発環境を提供しています。
2024年に公開された
Next.js 15
には重要な変更がいくつかあるため、既存プロジェクトをアップグレードする前に、順を追って準備する必要があります。
今回は、Next.js 14から15へ更新する方法を、例を使って一つずつ説明します。
14より古いバージョンを使っている場合は、まず14へ上げることをおすすめします。
移行前に、何が変わったかを簡単に確認します。
next/imageのpriorityが非推奨になった
next/fontのfallbackの変更
- Turbopackの更新
- 新しいMDXサポート方式
- Strict Modeの強化
Async Request APIの正式導入
公式Codemodによる移行の自動化
それぞれについて、以下で詳しく見ていきます。
まず、現在のNext.jsのバージョンを確認し、使用中の関連パッケージを整理します。
14.xを使っている場合は、次のコマンドで15へ更新できます。
npm install next@latest react@latest react-dom@latest
yarnの場合はこちらです。
yarn add next@latest react@latest react-dom@latest
注意
:Next.jsはReactとReactDOMのバージョンに密接に関連するため、一緒に更新するとエラーを減らせます。
1. next/imageのpriorityを削除する 🔗
Next.js 15以降、
priorityは使われなくなりました。
たとえば、以前のコードが次のようなものだったとします。
<Image src="/logo.png" alt="logo" width={100} height={100} priority />
priorityを削除し、代わりに<link rel="preload">を直接使うか、loading="eager"を検討します。
<Image src="/logo.png" alt="logo" width={100} height={100} loading="eager" />
2. next/fontのfallback設定の変更 🔗
以前、次のようにfallbackを設定していた場合を考えます。
const inter = Inter({ subsets: ['latin'], fallback: ['Arial'] });
現在は
fallbackが文字列の配列とは異なる新しい方式で処理され、警告が出ることがあります。
その場合は、公式ドキュメントのフォント設定ガイドに従うとよいでしょう。
3. Turbopackを使うプロジェクトの場合 🔗
Next.js 15ではTurbopackが強化されています。
next.config.jsで次のように明示的に設定できます。
const nextConfig = {
experimental: {
turbo: true,
},
};
module.exports = nextConfig;
ただし、まだすべての機能が安定しているわけではないため、問題があれば無効にすることも検討してください。
4. Async Request APIの導入 🔗
Next.js 15では
Async Request API
が正式に導入されました。
これは、Server Components内での
request.cookiesや
request.headersなどの非同期APIへのアクセスを簡単にする機能です。
以前は
headers()のようなヘルパー関数を使う必要がありました。
import { headers } from 'next/headers';
export default async function Page() {
const headerList = headers();
const token = headerList.get('Authorization');
return <div>Header 확인</div>;
}
現在は、propsで受け取ったrequestオブジェクトから、直接非同期でアクセスできます。
export default async function Page({ request }) {
const token = await request.headers.get('Authorization');
return <div>Header 확인</div>;
}
コードを簡潔にでき、
cookies、
headers、
url、
bodyなど、さまざまなプロパティにアクセスできます。
ただし、まだ実験的な機能なので、
公式ドキュメント↗を参考に、段階的に導入するとよいでしょう。
Next.js 15には
Codemodツール
が用意されており、繰り返しが多くミスをしやすいコード変更を自動処理できます。
主に次のような作業を行います。
- 非推奨になった属性の削除や変更(
priorityなど)
- 新しいAPIに合わせたコードのリファクタリング
- Async Request APIに関する変更の自動反映
使い方は次のとおりです。
npx @next/codemod <transform> <path>
たとえば、priorityを削除する場合は次のようになります。
npx @next/codemod remove-priority-image ./src
Codemodの一覧は
公式ドキュメント↗で確認できます。
適用前には、必ずGitなどのバージョン管理システムでバックアップを作ってください。
Next.js 15への更新には注意点があるものの、一つずつ確認しながら進めれば、大きな問題なく移行できます。
特に、非推奨になった属性や設定は、リリースノートをよく確認して対応することが重要です。
予想外のビルドエラーや動作不良があれば、まず以前のバージョンからどの機能が変わったかに着目して、コードを見直してみてください。
eslint-config-nextも一緒に最新版へそろえたか確認しましたか。
- プロジェクトでTurbopackの長所と短所を体験したら、整理しておくとよい記録になります。
- Async Request APIで便利になった点や、予想と異なった点も記録してみましょう。
- Codemodで自動化できた部分と、手作業で修正した部分を比較するのもよい方法です。