<aside> 🧑🏻‍🏫 프로젝트에 추가적으로 환경 설정을 하고 싶을 때 package.json 과 같은 위치인 루트 경로에 **"next.config.js"**라는 이름으로 설정파일을 추가하고 활용합니다.

</aside>

어떤 옵션이 있나?

• .next 라는 빌드 결과물의 폴더 이름을 변경하거나 빌드 할 때마다 생성되는 build id 등을 고정할 수도 있습니다.
• 실무에서 프로젝트를 할 때 dev 모드, production 모드, staging 모드에 따라 api url이 다른 경우가 있습니다. (개발 모드란 로컬에서 개발하는 것을 말하고, 프로덕션 모드는 실제 배포를 하여 사용자들이 보는 버전, 스테이징은 프로덕션에 올리기 전에 사내에서 테스트를 할 때 보는 버전이라고 생각하시면 됩니다.)
  • 개발을 끝내고 스테이징이나 프로덕션 버전을 배포할 때마다 api 주소를 코드에서 매번 바꾸는 것은 상당히 비효율 적입니다.
  • 아래와 같이 **NODE_ENV**로 환경을 확인하여 api url을 분기할 수 있습니다.
• next.config.js에 어떤 설정을 넣어야 할지 하나하나 공부할 필요는 없습니다. 프로젝트를 하다가 환경설정이 필요한 경우 아래를 Next.js 공식문서를 참고하시면 됩니다.
  • https://nextjs.org/docs/api-reference/next.config.js/introduction

실습 - 개발 모드에 따라 API 분기하기

• "yarn dev"로 프로젝트를 실행하면 아래 코드에서 env는 "development"이고, "yarn build"로 실행하면 env는 "production"이 됩니다.

const env = process.env.NODE_ENV;

switch (env) {
	case 'development':
		API_URL = '<http://localhost:8080>;
		break;
	case 'staging':
		API_URL = '<https://stg.api.evereathing.com>';
		break;
	case 'production':
		API_URL = '<https://api.evereathing.com>';
		break;
	default:
		API_URL = '<https://api.evereathing.com>';
}

module.exports = {
	env: {
		API_URL
	}
};

• staging을 추가하고 싶을 때는 package.json의 "scripts"에 스크립트를 추가하면 됩니다.

"scripts": {
	"dev": "next",
	"build:staging": "NODE_ENV=staging next build",
	"build": "next build",
	"start": "next start -p 80"
},

• 이렇게 설정한 API_URL은 아래와 같이 사용할 수 있습니다.

// utils/config.ts
export const API_URL = process.env.API_URL;

// API_URL 사용 예제
import { API_URL } from 'utils/config';

//생략
fetch(`${API_URL}/users`).then().then();