はじめに
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のバージョンは「next@10.0.8」です
参考までにその他の構成は下記の通り
npm list --depth=0
<出力結果>
├── @material-ui/core@4.11.3
├── @material-ui/icons@4.11.2
├── @material-ui/system@4.11.3
├── @types/node@14.14.21
├── @types/react-scroll@1.8.2
├── @types/react@16.14.2
├── @typescript-eslint/eslint-plugin@3.10.1
├── @typescript-eslint/parser@3.10.1
├── @typescript-eslint/typescript-estree@3.10.1
├── eslint-config-prettier@6.15.0
├── eslint-plugin-prettier@3.3.1
├── eslint-plugin-react@7.22.0
├── eslint@7.18.0
├── next@10.0.8
├── prettier@2.2.1
├── react-dom@16.14.0
├── react-scroll@1.8.1
├── react@16.14.0
├── sass@1.32.6
├── sharp@0.26.3
├── typescript@3.9.9
└── zenn-cli@0.1.75
最後に
深い説明は抜きとして、今回はM1 MacでNext.jsのimageが表示されなかったので解決した方法を簡単に書きました。
M1 Macで上手く動かず、調べてもわからない場合は、ライブラリやアプリがまだM1 Macに対応していない場合が多いので、気長にバージョンアップを待ちましょう。
誰かの助けになれば嬉しいです