バージョン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.xと14.xがEOLに達したため、12.22.0から16.14.0に引き上げられました。
- 最低限必要なReactバージョンは、17.0.2から18.2.0に引き上げられました。
swcMinify設定プロパティはfalseからtrueに変更されました。詳細についてはNext.js Compilerを参照してください。next/imageのインポートはnext/legacy/imageにリネームされました。next/future/imageのインポートはnext/imageにリネームされました。インポートを安全かつ自動的にリネームするためのcodemodが利用可能です。next/linkの直下の子要素は<a>ではなくなりました。レガシーな動作を使用するにはlegacyBehaviorプロパティを追加するか、<a>を削除してアップグレードしてください。コードを自動的にアップグレードするためのcodemodが利用可能です。target設定プロパティは削除され、Output File Tracingに置き換えられました。
共有機能の移行
Next.js 13では、新しい機能と規約を備えた新しいappディレクトリが導入されました。ただし、Next.js 13へのアップグレードで新しいapp Routerを使用する必要はありません。
更新されたImageコンポーネント、Linkコンポーネント、Scriptコンポーネント、Font optimizationなど、両方のディレクトリで機能する新しい機能を使用してpagesを引き続き使用できます。
<Image/>コンポーネント
Next.js 12では、一時的なインポートnext/future/imageによるImageコンポーネントの多くの改善が行われました。これらの改善には、クライアントサイドJavaScriptの削減、画像の拡張とスタイリングの簡素化、アクセシビリティの向上、ネイティブブラウザの遅延読み込みなどが含まれていました。
Next.js 13以降、この新しい動作はnext/imageのデフォルトになりました。
新しいImageコンポーネントへの移行を支援する2つのcodemodがあります。
- next-image-to-legacy-image: このcodemodは、
next/imageのインポートをnext/legacy/imageに安全かつ自動的にリネームし、Next.js 12と同じ動作を維持します。このcodemodを実行して、Next.js 13に迅速に自動更新することをお勧めします。 - next-image-experimental: 前のcodemodを実行した後、オプションでこの実験的なcodemodを実行して
next/legacy/imageを新しいnext/imageにアップグレードできます。これにより、未使用のプロパティが削除され、インラインスタイルが追加されます。このcodemodは実験的であり、静的な使用（例：<Image src={img} layout="responsive" />）のみを対象とし、動的な使用（例：<Image {...props} />）は対象外であることに注意してください。
または、移行ガイドに従って手動で更新することもできます。また、レガシー比較も参照してください。
<Link>コンポーネント
<Link> Componentは、子要素として<a>タグを手動で追加する必要がなくなりました。この動作は、バージョン12.2で実験的なオプションとして追加され、現在はデフォルトです。Next.js 13では、<Link>は常に<a>をレンダリングし、プロパティを下位のタグに渡すことができます。
例:
import Link from 'next/link'
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
About
</Link>リンクをNext.js 13にアップグレードするには、new-link codemodを使用できます。
<Script>コンポーネント
next/scriptの動作は、pagesとappの両方をサポートするように更新されました。appを段階的に採用する場合は、アップグレードガイドをお読みください。
フォント最適化
以前は、Next.jsはフォントCSSをインライン化することでフォントの最適化を支援していました。バージョン13では、フォント読み込みエクスペリエンスをカスタマイズできる新しいnext/fontモジュールが導入されており、高いパフォーマンスとプライバシーを確保できます。
next/fontの使用方法については、Optimizing Fontsを参照してください。
役に立ちましたか？