Next.js を 10 から 11 へあげてみたのと他にもちょっと

Next.js を 11 へあげたよ

このブログの Next.js を 10 から 11 へ移行してみました。

基本的には Next.js 公式の Upgrade Guideを参考にすれば問題なく 11 へ移行できました

一点だけ、下記エラーが出てしまいましたがnpm iするだけで解消したので Next.js さすがだなって感じです。

  To use ESLint, additional required package(s) must be installed.

Please install eslint-config-next by running:

        npm install --save-dev eslint-config-next

If you do not want to run ESLint during builds, disable it in next.config.js. See https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint

next/image の width/height 問題

公式ではlayout={'fill'}を使えとあるのですが、それだけだと画面いっぱいに表示される…（ぼくだけなのか?）
解決策としては、

position={'relative'}で囲ってあげる
objectFit={'contain'}を付与する

の二点になってくるのかなと思っています。
（自分のブログで確認中…問題なさそうだけどあまり綺麗じゃない）

  <Box
  position={"relative"}
  width={1}
  height={{ xs: 200, sm: 300, md: 500 }}
  marginY={5}
>
  <img src={src} alt={alt} layout={"fill"} objectFit={"contain"} />
</Box>

ここら辺の解決策はもっと考えていきたいなと思っています