Version 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.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>
コンポーネント
<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
の使用方法については、フォントの最適化を参照してください。