Next.js 12 から 13 にアップデートしたときの備忘録

はじめに

next.js 13 にアップデートしたときの備忘録として残しておきます

やったこと

• node.js の version 確認
• react の version 確認およびバージョンアップ
• Image, Link Component の書き換え

基本的には公式が用意している upgrade guide に沿ってアップデートしました。

1. node.js のバージョン確認
   1. 最低バージョンが 16.8 になっていたので確認。使用バージョンが 16.11 だったので一旦スルーしました。
2. react のバージョンアップ
   1. next.js 13 からは react の最低バージョンが 18.2 になっていたので必要であればアップデートする。現在は利用していたバージョンは 18.1 だったのでアップデートしました。
3. 各コンポーネントの修正対応

特に変更点が大きかったのは Link Component

今までは <a> タグで囲んでいたが、ver13 からは常に<a>タグをレンダリングするようになったので<a>で囲んでいた部分を除去しました。
スタイルも崩れる可能性があるのでそのあたりは柔軟に対応します。

公式でも以下のようなサンプルコードが載っています。

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 では非推奨や破壊的変更があった機能のコードを互換性を保ちながら自動でアップグレードしてくれる Codemods というものがありますが今回は変更範囲が少なかったので利用しなかったです。

Image Component

next.js 12 までは next/future/image から import していたものが 13 ではデフォルトになるらしい。大きな違いはまだ分かっていないが個人的に気付いたのは以前のものは alt がなくても動いたが、新しいものは動かなったので alt は入力しようねという教訓を得ました。

さいごに

stable ではない app dir 周りの機能は今回利用していないが、stable になったときにさっと導入するためにも触ってみたいと思っています。

参考

upgrade guide

https://beta.nextjs.org/docs/upgrade-guide