road: Next.js 13 에러 삽질기 - Image 컴포넌트 활용하기

roads/2023/11/24.mdx

@@ -0,0 +1,97 @@
+---
+title: 'Next.js 13 에러 삽질기 - Image 컴포넌트 활용하기'
+date: '2023-11-24'
+slug: '2023-11-24'
+type: 'road'
+---
+
+## Invalid src prop (…) on `next/image` 에러
+
+mock 이미지로 외부 경로 이미지를 사용할 때 발생한 에러이다.
+
+<Image
+  src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/next-js-13-invalid-src-prop-error.png"
+  alt="next-js-13-invalid-src-prop-error"
+/>
+
+간단하게 `next.config.js` 에서 에러에 표시된 `hostname`을 추가해주면 된다.
+
+**next.config.js**
+
+```js
+module.exports = {
+  images: {
+    domains: ['picsum.photos'],
+  },
+}
+```
+
+## 이미지 크기 모르는 경우
+
+이미지 크기를 알고 있어서 정확한 값을 넣으면 상관 없지만 크기를 모르는 경우도 있다.
+
+이때 다른 크기 값을 넣으면 다음과 같은 경고가 나온다.
+
+<Image
+  src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/next-js-13-image-size-warn.png"
+  alt="next-js-13-image-size-warn"
+/>
+
+작업을 하다보면 해당 경고문이 괜히 거슬린다..
+
+그리고 생각대로 이미지가 변경되지 않는 경우가 있다.
+
+**높이를 400px로 설정한 코드**
+
+```tsx
+<Image
+  src={'https://picsum.photos/id/237/200/300'}
+  alt="테스트 이미지"
+  priority
+  width={200}
+  height={400}
+/>
+```
+
+**실제 렌더링된 이미지**
+
+<Image
+  src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/next-js-13-not-change-image-size.png"
+  alt="next-js-13-not-change-image-size"
+/>
+
+공식 문서를 참고했을 때는 다음과 같이 코드를 구성하면 원하는 크기대로 보여주는 것 같다.
+
+- 부모 태그에 `position` 으로 `relative` or `fixed` or `absolute` 를 준다.
+- `Image` 컴포넌트에 `fill`, `sizes` 속성을 추가한다.
+
+**부모 태그를 적용해서 높이를 400px로 설정한 코드**
+
+```tsx
+<div className="relative h-[200px] w-[400px]">
+  <Image
+    src={'https://picsum.photos/id/237/200/300'}
+    alt="테스트 이미지"
+    priority
+    fill
+    sizes="(min-width: 66em) 33vw, (min-width: 44em) 50vw, 100vw"
+  />
+</div>
+```
+
+**실제 렌더링된 이미지**
+
+<Image
+  src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/next-js-13-change-image-size.png"
+  alt="next-js-13-change-image-size"
+/>
+
+우선 이렇게 하면 얼추 대부분의 경우 잘 적용되는 것 같다.
+
+이미지를 다루면서 느낀 점은 내가 디자인에 감각이 없어서인지 큰 차이가 아니면 다 똑같이 보여서 디테일한 부분을 잡기 힘들었다.
+
+어렵다 어려워.. 😇
+
+### 참고 문서
+
+- [Image](https://nextjs.org/docs/app/api-reference/components/image)