Menu

バージョン13へのアップグレード方法

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

Next.jsバージョン13にアップデートするには、任意のパッケージマネージャーを使用して以下のコマンドを実行してください：

Terminal
npm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
yarn add next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
pnpm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
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.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設定プロパティが削除され、Output File Tracingに置き換えられました。

共有機能の移行

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.js 12と同じ動作を維持するために、next/imageインポートを安全かつ自動的にnext/legacy/imageに名前変更します。このコードモッドを実行して、自動的に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の使用方法については、フォントの最適化をご覧ください。