Version 13

Upgrading from 12 to 13

To update to Next.js version 13, run the following command using your preferred package manager:

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

Good to konw： TypeScript を使用している場合は、@types/reactと@types/react-domも最新バージョンにアップグレードしてください。

v13 概要

• 対応ブラウザは Internet Explorer のサポートを終了し、target を現代のブラウザに変更しました。
• 最小の Node.js version は、12.x と 14.x がライフサイクルの終わりを迎えたため、12.22.0 から 16.14.0 に引き上げられました。
• 最小限の React version が 17.0.2 から 18.2.0 に上げられました。
• swcMinify設定プロパティはfalseからtrueに変更されました。詳細については、Next.js Compilerをご覧ください。
• next/image の import は next/legacy/imageに名前が変更されました。 next/future/image の import は next/imageに名前が変更されました。あなたのインポートを安全かつ自動的に名前変更するためのcodemod が利用可能です。
• next/linkの子はもはや<a>であることはできません。legacyBehaviorプロパティを追加して従来の動作を使用するか、<a>を削除してアップグレードします。codemod は利用可能ですで、自動的にあなたの code をアップグレードします。
• target設定プロパティは削除され、Output File Tracingによって置き換えられました。

Migrating shared features

Next.js 13 は、新しい機能や規約が含まれた新しいapp ディレクトリを導入します。しかし、 Next.js 13 へのアップグレードは、新しいapp ディレクトリを require 。

pagesを引き続き使用することができ、更新されたImage component、Link component、Script component、そしてFont optimizationなど、両方のディレクトリで動作する新機能が含まれています。

<Image/> Component

Next.js 12 は、一時的な import：next/future/imageを使用して、Image Component への多くの改善を導入しました。これらの改善には、Client 側の JavaScript を少なくし、画像を拡張し、style を付けやすくする方法、より良いアクセシビリティ、そしてネイティブブラウザの lazy loading の改良が含まれています。

Next.js 13 から始まり、この新しい動作は現在、next/imageのための default となりました。

There are two codemods to help you migrate to the new Image Component:

• next-image-to-legacy-image:　この codemod は、Next.js 12 と同じ挙動を維持するために、next/imageのインポートを安全かつ自動的にnext/legacy/imageに名前を変更します。Next.js 13 にすばやく自動的に更新するために、この codemod を実行することをお勧めします。
• next-image-experimental: 前の codemod を実行した後、オプションでこの実験的な codemod を実行して、next/legacy/imageを新たなnext/imageにアップグレードすることができます。これにより、未使用の「 props 」を削除し、インラインの「 styles 」を追加します。この codemod が実験的であり、静的な使用(例えば<Image src={img} layout="responsive" />のような)のみをカバーし、「 dynamic 」な使用(例えば<Image {...props} />のような)はカバーしないことに注意してください。

あるいは、マイグレーションガイドに従って手動で更新することができます。また、legacy comparisonもご覧いただけます。

<Link> Component

<Link> Componentはもはや手動で子として<a>タグを追加する必要はありません。この振る舞いはversion 12.2 で実験的なオプションとして追加され、現在は default となっています。Next.js 13 では、<Link>は常に<a>をレンダリングし、props を基礎となるタグに転送することができます。

For example:

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> Component

next/scriptの振る舞いが更新され、pagesとappの両方をサポートするようになりました。appを段階的に採用する場合は、アップグレードガイドを読んでください。

Font Optimization

以前、Next.js は、フォントの CSS のインライン化によってフォントを最適化するのに役立ちました。Version13 では、新たにnext/font モジュールが導入され、優れたパフォーマンスとプライバシーを確保しつつ、フォントの loading 体験をカスタマイズする能力を提供します。

next/fontの使用方法を学びたい場合は、フォントの最適化をご覧ください。