문제 발생

background-image 속성으로 s3 버킷의 파일 url을 넣어주는 과정에 값은 정확히 들어가지만 이미지가 렌더링은 안되고, 링크를 클릭하면 이미지가 다운로드되는 문제 발견.

원인 분석

next.js가 url을 base url 기준으로 읽어오는 방식이 문제인 것으로 판단됨.

문제 해결

아래와 같이 경로를 rewrite 하는 코드를 설정하여 해결.

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
          source: '/:path*',
          destination: 'https://example/:path*', 
      },
    ]
  },
}