[firebase] Next.js firebase를 사용하여 배포하기

.package.json 에 "export" 추가

{
  "name": "next_animation",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "jquery": "^3.6.0",
    "next": "12.1.0",
    "node-sass": "^7.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0"
  }
}

 

 

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  cssModules: true,
  images: {
    loader: 'akamai',
    path: '/',
  },
};

const withSass = require('@zeit/next-sass');
module.exports = withSass;
module.exports = nextConfig;

images loader추가해주지 않으면 out 폴더를 만들 때 오류가 발생한다.

 

 

오류 발생한지도 모르고 deplopy만 계속 했더니 아래와 같은 페이지 엄청 떠서 해맸음. 

 

$ npm run build && npm run export

실행하면 out 페이지가 생긴다.

 

 

그 다음

$ firebase init hosting

react에선 build였지만 nextjs는 out폴더를 만들게 되고 

yes

no

no

를 입력한다. 

 

마지막으로 

 $ firebase init hosting

 

배포 성공.