소개

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의 버전은 "네 xt＠10.0.8"입니다.

참고로 그 밖의 구성은 아래와 같다.

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을 지원하지 않는 경우가 많기 때문에 기장에 버전 업을 기다리십시오.

누군가의 도움이되면 기쁩니다