Next.js 12→13 アップグレードメモ

Next.js
Next.js

nextのアップグレード

Upgrade Guide | Next.js

https://nextjs.org/docs/upgrading

公式に従ってコマンド実行

yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

<Image>コンポーネントのimportの修正

next/future/image から next/image に変更されたので、使用している箇所の修正

※ 今までの next/imagenext/legacy/image になりました。

公式から codemod が用意されているので実行

npx @next/codemod next-image-to-legacy-image ./src

next/imagenext/legacy/image となり、next/future/imagenext/image に変わりました。

<Link>コンポーネントの修正

今までは <a> タグを子として追加していたのが、今後は不要になった。

そのため <Link> コンポーネントの <a> タグを削除する必要がある。

こちらも公式から codemod が用意されている

npx @next/codemod new-link ./src

上記コマンドを実行すると <a> タグを next/link から安全に削除するか、 <Link> コンポーネントに legacyBehavior を追加します。

logo

Yukimasa Ikeda


GithubTwitterzennyukimasablog

© 2023 Yukimasa Ikeda. All rights reserved