バージョン13

バージョン12から13へのアップグレード

Next.jsバージョン13に更新するには、お好みのパッケージマネージャーを使用して次のコマンドを実行してください:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# または
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# または
pnpm up next react react-dom eslint-config-next --latest
# または
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

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ディレクトリの使用を必須としません。

pagesを引き続き使用しながら、Imageコンポーネント、Linkコンポーネント、Scriptコンポーネント、フォント最適化など、両ディレクトリで動作する新機能を利用できます。

<Image/>コンポーネント

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

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

新しいImageコンポーネントへの移行を支援する2つのコードモッドが利用可能です:

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