[Next.js] 업로드 이미지 로드 안되는 문제

1. 업로드한 이미지 로드 안 되는 문제

사용자가 업로드한 이미지를 public 폴더에 저장되도록 했고, DB에는 해당 파일명이 누적되도록 했다. 이 기능들은 순조롭게 잘 동작했다. 하지만 업로드한 이미지를 브라우저에서 보려고 리스트를 열었을 때는 엑박만 보였다.

 

2. public 폴더의 내용은 빌드 시점에 결정

Next.js의 public 폴더의 내용은 빌드 시점에 결정된다. 즉, 빌드 이후에 추가된 내용은 사용하 수 없다. 개발 모드에서는 이런 현상이 발생하지 않았는데, 그 이유는 프로젝트의 코드가 변경되면 프로젝트를 다시 실행하기 때문이다. 서버에 빌드하여 배포한 경우에도 이미지 업로드 후 해당 서버를 죽이고(나의 경우 pm2 delete 명령) 다시 구동하면 업로드한 이미지가 정상적으로 로드되는 것을 확인할 수 있다. 이와 관련하여 Next.js 공식 문서에서 다음과 같이 안내하고 있다.

Only assets that are in the public directory at build time will be served by Next.js. Files added at request time won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.

* 원문 전체 : https://nextjs.org/docs/app/building-your-application/optimizing/static-assets

따라서 별도의 이미지(혹은 파일) 서버를 운용해야 이미지(혹은 파일) 업로드 기능을 정상적으로 사용할 수 있겠다.

---

*2024-01-05 추가

3. 이미지 서버와 public 폴더 함께 사용

Next.js에서 정적 자원의 경로는 public 폴더를 기본값으로 가진다. 따라서 이미지 서버를 사용하기 위해서는 이 설정을 변경해야 하는데, loader를 이용할 수 있다. 아래와 같이 image-loader.js를 생성하고, next.config.js를 수정하면 된다.

*공식문서

// ./image/image-loader.js
export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

// ./next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './image/image-loader.js',
  },
}

 

어떤 경우에는 public의 정적 자원을 사용할 필요가 있다. 이때는 아래와 같이 Image 태그에 loader 속성을 지정하면 된다.

import home from "public/assets/home.png";

export default function Home() {
  return (
    <Image
        loader={({ src }) => `${src}`} // public의 정적 자원 사용하기 위함
        src={home}
        alt="home"
        width={500}
        priority={true}
    />
  );
}

---

*2024-01-11

loader는 이미지 최적화가 클라우드 서비스 등 외부에서 이루어지는 경우 Next.js의 이미지 최적화 기능을 사용하지 않고 이미지를 로딩할 때 사용하는 기능이다. 현재 진행 중인 프로젝트의 경우 이미지 서버에서 이미지 최적화 기능은 작동 중이 아니므로 이미지 최적화의 관점에서 본다면 loader를 이용한 방식은 적절하지 못할 수 있겠다. 또한 이미지 서버의 url이 공개되기 때문에 보안에도 취약할 수 있다.