Next.js 13 にアップデートにしたら修正が必要だった箇所の備忘録

表題の通り、Next.jsを13にアップデートしたことでコードの修正が必要になったのでその備忘録です。
　私の場合は主に「next/image」「next/link」で修正が必要でした。

next/image

主に以下の内容がアップデートの目玉らしい

• レイアウトシフトなしで画像表示
• オンデマンドでファイル最適化
• クライアント側のJS軽量化
• styleの設定がより簡単に
• Webプラットフォームとの整合性
• ネイティブ遅延ロードによりさらに高速化

13より前のnext/imageを使っていた私の場合

古いverのNextImageは「next/legacy/image」という名前に変更されたらしい。

新しいnext/imageでは、「layout=”fill”」「objectFit=”contain”」のような指定がいらなくなるようだ。（fillについては、単純に「fill」というプロパティがあるようだ）

すぐに対応できないがNext.jsのバージョンは上げたいという人用なのか、next/legacy/image（古い仕様のままになるよう）に置換するコマンドが用意されているとのこと。
　私の場合は新仕様に修正する方向の対応するため上記のコマンドは使用していません。

next/link

中にaタグを仕込む必要がなくなったとのこと。（というより子要素に<a>があれば削除の必要がある）

タグ内にhref等を設定することになります。

よってpassHrefプロパティは不要になるが、旧仕様にも対応できるようにするためか現状は残してある。

まとめると

私の場合以下の修正が必要だった。

• next/image
  • 廃止となったプロパティ削除
  • 指定するプロパティ変更
• next/link
  • 子要素のタグ削除
  • hrefは<Link>に設定

参考

https://nextjs.org/blog/next-13#breaking-changes
https://nextjs.org/docs/api-reference/next/link
https://nextjs.org/docs/api-reference/next/image