コンテンツへスキップ
アプリケーションの構築アップグレードバージョン 13

バージョン 13

12 から 13 へのアップグレード

Next.js バージョン 13 にアップデートするには、お好みのパッケージマネージャーを使用して次のコマンドを実行します。

ターミナル
npm i next@13 react@latest react-dom@latest eslint-config-next@13
ターミナル
yarn add next@13 react@latest react-dom@latest eslint-config-next@13
ターミナル
pnpm i next@13 react@latest react-dom@latest eslint-config-next@13
ターミナル
bun add next@13 react@latest react-dom@latest eslint-config-next@13

重要事項：TypeScript を使用している場合は、@types/react と @types/react-dom も最新バージョンにアップグレードしてください。

v13 サマリー

  • サポートされているブラウザが変更され、Internet Explorer のサポートが終了し、最新のブラウザがターゲットになりました。サポートされているブラウザ
  • 12.x と 14.x がサポート終了に達したため、Node.js の最小バージョンが 12.22.0 から 16.14.0 に引き上げられました。
  • React の最小バージョンが 17.0.2 から 18.2.0 に引き上げられました。
  • swcMinify 設定プロパティが false から true に変更されました。詳細については Next.js コンパイラ を参照してください。
  • next/image のインポートが next/legacy/image に名前変更されました。next/future/image のインポートは next/image に名前変更されました。インポートを安全かつ自動的に名前変更するためのcodemod が利用可能です。
  • next/link の子要素に <a> を使用できなくなりました。レガシー動作を使用するには legacyBehavior プロップを追加するか、<a> を削除してアップグレードしてください。codemod が利用可能です。
  • 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つのcodemodがあります。

  • next-image-to-legacy-image：このcodemodは、Next.js 12と同じ動作を維持するために、next/imageのインポートをnext/legacy/imageに安全かつ自動的に名前変更します。Next.js 13に自動的に迅速にアップデートするには、このcodemodを実行することをお勧めします。
  • next-image-experimental：前のコードモッドを実行した後、この実験的なコードモッドを実行してnext/legacy/imageを新しいnext/imageにアップグレードすることができます。これにより、使用されていないプロパティが削除され、インラインスタイルが追加されます。このコードモッドは実験的なものであり、静的な使用方法（例：<Image src={img} layout="responsive" />）のみを対象としており、動的な使用方法（例：<Image {...props} />）は対象としていないことにご注意ください。

または、移行ガイドに従って手動で更新し、レガシーとの比較も参照してください。

<Link>コンポーネントは、子要素として<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コードモッドを使用できます。

<Script> コンポーネント

next/scriptの動作は、pagesとappの両方をサポートするように更新されました。appを段階的に採用する場合は、アップグレードガイドをお読みください。

フォント最適化

以前は、Next.jsはフォントCSSをインライン化することでフォントの最適化を支援していました。バージョン13では、優れたパフォーマンスとプライバシーを確保しながらも、フォントの読み込みエクスペリエンスをカスタマイズできる新しいnext/fontモジュールが導入されました。

フォントの最適化を参照して、next/fontの使用方法を確認してください。