이슈

최근에 React로 진행했던 프로젝트를 Next.js + TS 로 마이그레이션을 진행하던 중, 서버에서 받아온 이미지 url을 Next의 Image 태그의 src 속성에서 읽지 못하는 상황이 발생했다.

원인

검색해보니 해당 에러는 Next.js에서 외부 링크의 이미지를 불러오려고 할 때 발생하는 에러라고 한다.

해결 방안

해당 에러는 next.config.js에 도메인 링크를 입력해주면 간단하게 해결되는 문제이다!

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  //여기서부터
  images: {
    domains: [
      'mytamla-bucket.s3.ap-northeast-2.amazonaws.com',
    ],
  },
  //여기까지
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

도메인에 넣어줄 값은 에러에서 친절하게 알려주니 그대로 입력하면 된다.

다른 링크들도 포함시키고 싶을 시 배열 안에 같이 넣어주면 된다.

이후 바로 적용되는 것은 아니니 꼭 vscode를 재실행해주자!

그 외로 주의해야 할 점을 몇 가지 적어보자면

1. next.config.js에 다른 요소들도 추가 설정을 했을 때 가장 먼저 images 설정을 하지 않으면 인식하지 못하는 문제가 발생한다.
2. images에는 여러 옵션이 있는데, 그 중 loader 옵션을 사용할 경우 domains 옵션은 무시된다.
3. loader 옵션을 사용할 경우 path 옵션을 사용해 불러오려는 이미지 주소의 접두사를 써주어야 한다.

참고
(넥스트 공식 문서)
https://nextjs.org/docs/basic-features/image-optimization

https://kir93.tistory.com/entry/NextJS-Image-Tag-Error-Invalid-src-prop-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0