はじめに

Youtube等で「開発する人の大半はM1 Macを購入しても問題ない」という動画を鵜呑みにし、絶賛ドハマり中です。
今回は、Next.jsを使って開発中に出くわしたバグ『imageが表示されない』件についてです。
※ハマっていた割にあっさり直りました。

next/imageとは

Next.js v10.0〜追加され、画像を最適化をしてくれるコンポーネントです。

import Image from 'next/image'

<Image src="/examle.jpg" width={400} height={200}>

本来、上記のように書くだけで簡単に最適化できます。
が、、、M1に変えたところ画像が表示されなくなりました。。。

やったこと

とりあえず、同じ症状が出た人を探しました。
すると下記の投稿を発見しました。
Can't compile under Apple Silicon M1 arm64

なにも考えず、一旦記載されている内容を実行

brew info vips

brew reinstall vips

結果：表示されず、、、

色々調べましたが同じような対応方法しか書いておらず、積んだと思いました。

諦めて、標準の「img」タグで代用しようと思いましたが、最後にダメ元でNext.jsを最新化したところ、、、

npm install next@latest

問題なく表示されました！！！！
（てかバージョンアップあったのか、、、すでに最新状態だと思い混んでました）
因みに、Next.jsのバージョンは「[email protected]」です

参考までにその他の構成は下記の通り

npm list --depth=0

<出力結果>
├── @material-ui/[email protected]
├── @material-ui/[email protected]
├── @material-ui/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

最後に

深い説明は抜きとして、今回はM1 MacでNext.jsのimageが表示されなかったので解決した方法を簡単に書きました。

M1 Macで上手く動かず、調べてもわからない場合は、ライブラリやアプリがまだM1 Macに対応していない場合が多いので、気長にバージョンアップを待ちましょう。

誰かの助けになれば嬉しいです