バージョン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も最新バージョンにアップグレードしてください。
v13の主な変更点
- サポート対象ブラウザが変更され、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ディレクトリを使用する必要はありません。
pagesを継続使用しながら、Imageコンポーネント、Linkコンポーネント、Scriptコンポーネント、フォント最適化など、両ディレクトリで動作する新機能を利用できます。
<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の使用方法については、フォントの最適化を参照してください。