バージョン13へのアップグレード方法
バージョン12から13へのアップグレード
Next.jsバージョン13にアップデートするには、お使いのパッケージマネージャーで以下のコマンドを実行してください:
npm i next@13 react@latest react-dom@latest eslint-config-next@13yarn add next@13 react@latest react-dom@latest eslint-config-next@13pnpm i next@13 react@latest react-dom@latest eslint-config-next@13bun add next@13 react@latest react-dom@latest eslint-config-next@13補足: TypeScriptを使用している場合、
@types/reactと@types/react-domも最新バージョンにアップグレードしてください。
バージョン13の主な変更点
- サポート対象ブラウザが変更され、Internet Explorerのサポートが終了し、モダンブラウザが対象になりました。
- Node.jsの最低バージョン要件が12.22.0から16.14.0に引き上げられました（12.xと14.xはサポート終了済みのため）。
- Reactの最低バージョン要件が17.0.2から18.2.0に引き上げられました。
swcMinify設定プロパティのデフォルト値がfalseからtrueに変更されました。詳細はNext.jsコンパイラを参照してください。next/imageインポートはnext/legacy/imageに、next/future/imageインポートはnext/imageに名称変更されました。インポートを安全に自動的にリネームするコードモッドが利用可能です。next/linkの子要素として<a>タグを使用できなくなりました。従来の動作を維持するにはlegacyBehaviorプロップを追加するか、<a>タグを削除してアップグレードしてください。コードを自動的にアップグレードするコードモッドが利用可能です。target設定プロパティが削除され、出力ファイルトレーシングに置き換えられました。
共通機能の移行
Next.js 13では新しいappディレクトリと新しい機能・規約が導入されました。ただし、Next.js 13へのアップグレードに新しいappルーターの使用は必須ではありません。
更新されたImageコンポーネント、Linkコンポーネント、Scriptコンポーネント、フォント最適化など、両ディレクトリで動作する新機能と共にpagesの継続使用が可能です。
<Image/>コンポーネント
Next.js 12では一時的なインポートnext/future/imageを通じてImageコンポーネントに多くの改善が加えられました。これらの改善には、クライアントサイドJavaScriptの削減、画像の拡張とスタイリングの簡易化、アクセシビリティの向上、ネイティブブラウザの遅延読み込みなどが含まれます。
Next.js 13では、この新しい動作がnext/imageのデフォルトになりました。
新しいImageコンポーネントへの移行を支援する2つのコードモッドが利用可能です:
- next-image-to-legacy-image: このコードモッドは
next/imageインポートをnext/legacy/imageに安全かつ自動的にリネームし、Next.js 12と同じ動作を維持します。Next.js 13への迅速なアップデートにはこのコードモッドの実行を推奨します。 - next-image-experimental: 上記のコードモッド実行後、オプションでこの実験的コードモッドを実行し、
next/legacy/imageを新しいnext/imageにアップグレードできます。これにより未使用のプロップが削除され、インラインスタイルが追加されます。このコードモッドは実験的で、静的用法（例:<Image src={img} layout="responsive" />）のみをカバーし、動的用法（例:<Image {...props} />）は対象外です。
手動で更新する場合は移行ガイドに従ってください。レガシー比較も参照できます。
<Link>コンポーネント
<Link>コンポーネントでは、子要素として手動で<a>タグを追加する必要がなくなりました。この動作はバージョン12.2で実験的オプションとして追加され、現在はデフォルトになっています。Next.js 13では、<Link>は常に<a>をレンダリングし、基礎となるタグにプロップを転送できます。
例:
import Link from 'next/link'
// Next.js 12: `<a>`をネストしないと除外される
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>`は内部で常に`<a>`をレンダリング
<Link href="/about">
About
</Link>リンクをNext.js 13にアップグレードするには、new-linkコードモッドを使用できます。
<Script>コンポーネント
next/scriptの動作が更新され、pagesとappの両方をサポートするようになりました。appを段階的に採用する場合は、アップグレードガイドをお読みください。
フォント最適化
以前のNext.jsでは、フォントCSSをインライン化することでフォント最適化を支援していました。バージョン13では新しいnext/fontモジュールが導入され、優れたパフォーマンスとプライバシーを維持しながらフォント読み込みエクスペリエンスをカスタマイズできるようになりました。
next/fontの使用方法についてはフォントの最適化を参照してください。