Next.js
Next.js를 사용하여 React 개발을 할 때 console.log는 평소에 개발자 도구에서 뜨는 것이 아닌 터미널 창에서 확인할 수 있다
img를 넣을 때
- public 폴더에 이미지를 넣고 경로는 바로
/로 시작해도 괜찮다. - public 폴더 안에 있는 것들은 사이트가 발행될 때 사이트 root경로로 이동하기 때문이다.
img 최적화!
- lazy loading
- 사이즈 최적화
- layout shift(이미지 로딩이 느려지면서 레이아웃이 밀려나는 것) 방지
등이 있는데 방법은 먼저 상단에서 Image라는 컴포넌트를 임포트 해온다.
import Image from "next/image"
임포트 후 img 태그 사용했던 부분을 Image 컴포넌트로 변경하자.
이러면 오류가 나오는데 경로를 img 사용했던 그대로 사용하면 안된다. 최적화된 이미지를 넣으려면 이미지를 import 해서 경로를 넣어야 한다.
퍼블릭 폴더 안에 있는 이미지를 가져와보자
import picture(아무작명 가능) from "/public/food0.png"
이렇게 가져왔고 public에서 가져오려면 @/public/food0.png 이렇게 경로를 써도 무방하다.
그런데 이러면 뭔가 애매하다. 반복문을 이용해 각 이미지들을 뿌려주고 싶은데 import를 사용할 경우 반복문으로 뿌려주기 난감해진다.
또한 내 프로젝트 안에 있는 이미지 들이 아닌 외부 사이트 이미지나 데이터로 받는 이미지들을 사용할 수도 있기 때문이다.
만약 이곳에 s3 같은 외부에서 받은 이미지 경로를 준다 하면
<Image src="https://s3...." width={...} height={...} />
이런식으로 width와 height값이 꼭 필요하다.
또 next.config.js 파일에 들어가서
images:{
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname:'/my-bucket/**',
}
]
}와 같은 도메인, 경로 등록을 해야한다
고로 최적화는 먼저 완성 후에 마지막에 점검하며 수정하는 편이 좋다.
방금 페이지를 수정하면서 만난 에러이다
Hydration failed because the initial UI does not match what was rendered on the server.
렌더링이 충돌된 것 같아 열심히 뒤져보니 layout을 설정할 때 실수 했다.
각 페이지가 라우트 될 때 layout을 각각 설정할 수 있는데 나는 최 상단에 있는 layout을 복붙 하다보니 html에 body를 추가로 적은 것이다.
모두 지우고 하나의 div로 감싸니 말끔하게 해결됐다.
