Nextjs 배포 to Firebase (Image Loader)

 

 

Vercel.app 에서 Firebase로 시도한 이유 

• vercel 팀이 만든 nextjs 는 보통 vercel.app 에 배포
• vercel.app은 무료 ssl 인증서로 유명한 lets encrypt 사용

• windows 8.1 등 일부 오래된 컴퓨터에서 lets encrypt 인증서 오류가 발생

연결이 비공개로 설정되어 있지 않습니다.
공격자가 curadenkorea.vercel.app에서 정보(예: 비밀번호, 메시지, 신용카드 등)를 도용하려고 시도 중일 수 있습니다. 자세히 알아보기
NET::ERR_CERT_DATE_INVALID

Firebase 에 배포하기

1. package.json 에 build 스크립트에 export 추가
2. npm run build or yarn build
   이렇게 하면 out 이라는 폴더가 생김

"build": "next build && next export",

  "scripts": {
    "dev": "export PORT=3030 && next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },

그런데 Image Loader 오류가 나면서 빌드 실패함 

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.

 

이미지 로더 사용하기

next.config.js 에 images 추가 

 

  images: {
    loader: "custom"
  }

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    loader: "custom"
  }
}
module.exports = nextConfig

// loader.js 를 만들어 적당한 경로에 놓기 
function imageLoader({ src }) {
  return `${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY
}
module.exports = imageLoader;

Image 태그 사용하는 모든 파일에 로더 변수 생성

import Image from "next/image";
... 중략 ...

const imageLoader = require("[여러분의 경로]/loader.js");

모든 Image 태그에 loader를 추가 

<Image loader={imageLoader} unoptimized={true}