Next.js 환경별 빌드 dotenv

Next.js 혹은 Node.js 에서 환경별로 빌드하는 방법은 두가지가 존재한다.

Node 에서 build 시에 env 값의 우선순위는 env.production > env.development > env.local 형태로 바라보기 때문에 다음과 같이 build 시 해당 파일을 .env.local 로 변경하여 npm start 로 실행시 development, production 에 속한 ENV 값을 local로 하여 해당 파일을 읽어 실행 하도록 한다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "cp .env.development .env.local && react-scripts build",
    "build:prod": "cp .env.production .env.local && react-scripts build",
    ... 
    생략 

dotenv 를 활용한 환경별 빌드 방법

dotenv를 설치하여 build/start 할때 원하는 환경파일을 읽어 사용 할 수있다.

다음 명령어를 수행하여 dotenv를 설치한다.

npm install dotenv

package.json

  "scripts": {
    **"build:dev": "dotenv -e .env.development-test next build",
    "build:prod": "dotenv -e .env.production next build",**
    "dev": "dotenv -e .env.development-test next dev",
    "start:prod": "dotenv -e env.**production** next start",
    "start:dev": "dotenv -e .env.development-test next start",
    "start": "next start"
    ... 생략 

  },
  "dependencies": {
         **"dotenv": "^16.4.7",**
  }
  "devDependencies": {
     **"dotenv-cli": "^7.4.4",**
  },

• pacakge.json 에 dotenv가 포함된것을 확인 할 수있다
• scripts 에서 start or build 할때 “dotenv” 를 사용하여 필요한 환경변수 항목을 읽어 Runtime 시 사용한다.

예시 ) process.env.${변수명}

export default withAuth(
  function middleware(req: any) {
    const baseUrl = **process.env.NEXTAUTH_URL;


----
import axios from "axios";

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    "Content-Type": "application/json",
  },
});**

빌드 및 실행 예시

#빌드
npm run build:dev
npm run build:prod

#서버 구동
npm run start:dev   #개발 구동 .env.development
npm run start:prod  #운영 구동 .env.production

💡

build 된 결과물은 .next 폴더로 결과물이 생긴다. 해당 파일은 SSR(Server side rendering) 작업이 포함되어 있음으로 nginx 와같은 정적 서버에 결과물을 넣어도 동작되지 않음을 인지 하자

Next.js exports 종류

1. output: "standalone"
독립적인 실행환경 구성을 위한 방법에 사용됨 Next.js 자체로 SSR 을 사용할경우

// next.config.js
// Next.js 독립설정을 위한 방법 
module.exports = {
  output: "standalone",
};

2. output: "export"
Static export HTML 형태로 사용하는경우 사용한다.

Next.js 는 SSR을 기본적으로 지원하기 때문에 export로 사용할 경우 middleware, API Router , Cookies & Session 등 SSR 에서 사용할수 있는 기능을 이용 할 수 없다.

• npm run build 를 실행한다.
• 결과물은 기존 build 폴더가 아닌 out 폴더로 생성되며,
• 해당 결과물을 이용하여 S3 혹은 Nginx 서버에 배포하여 사용 할 수 있다.

// next.config.js
// Next.js 정적 HTML 사이트를 생성하는 방법 
module.exports = {
  output: "export",
  // 추가적인 설정이 필요할 경우 여기서 설정
};

• Next.js 13 버전 이후 부터는 output: 'export'를 사용하면 next export 명령어는 필요 없고, next build만 실행하면 자동으로 out 폴더에 정적 사이트가 생성된다.

Next export는 정적사이트를 만들때 사용되며, 서버측 기능을 사용 할 수 없다.

next export 시 사용 불가 항목

• SSR (getServerSideProps)
• API Routes
• Middleware
• Incremental Static Regeneration (ISR)
• 서버 측 라우팅
• 쿠키, 세션 등 서버 상태 관리