🪬
Next.js 12→13 アップグレードメモ
nextのアップグレード
公式に従ってコマンド実行。
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
<Image>コンポーネントのimportの修正
next/future/image から next/image に変更されたので、使用している箇所の修正。
※ 今までの next/image は next/legacy/image になりました。
公式から codemod が用意されているので実行。
npx @next/codemod next-image-to-legacy-image ./src
next/image は next/legacy/image となり、next/future/image は next/image に変わりました。
<Link>コンポーネントの修正
今までは <a> タグを子として追加していたのが、今後は不要になった。
そのため <Link> コンポーネントの <a> タグを削除する必要がある。
こちらも公式から codemod が用意されている。
npx @next/codemod new-link ./src
上記コマンドを実行すると <a> タグを next/link から安全に削除するか、 <Link> コンポーネントに legacyBehavior を追加します。
Discussion