コンテンツにスキップ
アプリケーションの構築アップグレードバージョン 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 がサポート対象外となり、モダンブラウザが対象となりました。
  • 最小 Node.js バージョンは、12.x と 14.x がサポート終了 (end-of-life) に達したため、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 設定プロパティは削除され、Output File Tracing に置き換えられました。

共有機能の移行

Next.js 13 では、新しい機能と規約を持つ新しい app ディレクトリが導入されました。しかし、Next.js 13 へのアップグレードは新しい app Router の使用を必須とはしません。

更新された Image コンポーネント、Link コンポーネント、Script コンポーネント、フォント最適化など、両方のディレクトリで機能する新機能を使用して pages を引き続き使用できます。

<Image/> コンポーネント

Next.js 12 では、一時的なインポート next/future/image を使用して Image コンポーネントに多くの改善が導入されました。これらの改善には、クライアントサイド JavaScript の削減、画像の拡張とスタイルのより簡単な方法、アクセシビリティの向上、ネイティブブラウザの遅延読み込みが含まれていました。

Next.js 13 以降、この新しい動作が next/image のデフォルトとなりました。

新しい Image コンポーネントへの移行を支援する2つの codemodsがあります

  • next-image-to-legacy-image: この codemod は、next/image のインポートを安全かつ自動的に next/legacy/image に名称変更し、Next.js 12 と同じ動作を維持します。Next.js 13 に自動的に迅速に更新するために、この codemod を実行することをお勧めします。
  • next-image-experimental: 前の codemod を実行した後、オプションでこの実験的な codemod を実行して、next/legacy/image を新しい next/image にアップグレードできます。これにより、未使用のプロパティが削除され、インラインスタイルが追加されます。この codemod は実験的であり、静的な使用法（<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 codemod を使用できます。

<Script> コンポーネント

next/script の動作が更新され、pages と app の両方をサポートするようになりました。app を段階的に導入する場合は、アップグレードガイドを参照してください。

フォントの最適化

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

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