Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

Version 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設定プロパティが削除され、出力ファイルトレースに置き換えられました。

共有機能の移行

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>コンポーネントは、子要素として<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の動作が更新され、pagesappの両方をサポートするようになりました。appを段階的に採用する場合は、アップグレードガイドをお読みください。

フォント最適化

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

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