1. next.config.js가 필요한 이유

• 프로젝트 환경 설정을 위해서 사용하는 파일이며, package.json과 같은 위치인 루트 경로에 “next.config.js”라는 파일을 추가하면 된다.

2. 대표적인 next.config.js 옵션

1. .next 라는 빌드 결과물의 폴더 이름을 변경하거나 빌드 할 때마다 생성되는 build id 등을 고정할 수도 있다.
2. dev 모드, production 모드, staging 모드의 api url을 분기할 수 있다. (개발 모드 : 로컬에서 개발하는 것, 스테이징 : 프로덕션에 올리기 전에 사내에서 테스트를 할 때 보는 버전, 프로덕션 모드 : 실제 배포를 하여 사용자들이 보는 버전)
3. 이 밖에 옵션은 그 때 그 때 공식문서를 참고한다. https://nextjs.org/docs/api-reference/next.config.js/introduction

3. API 분기 예제

• ex) "yarn dev"로 프로젝트를 실행하면 개발모드의 API를, “yarn build”로 프로젝트를 실해하면 production의 API를 가져오는 코드를 만든다.

  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
  	}
  };
  

참고문헌

• next.js 공식 문서 - https://nextjs.org/docs/getting-started
• [toy blog service] Next.js의 API와 json - https://mytutorials.tistory.com/353
• Next.js - 시작 - 1 - https://suk9.tistory.com/83
• 위코드 next.js - https://nextjs.org/docs/getting-started
• [Next.js] Next.js 시작하기- https://garve32.tistory.com/33?category=473361
• 서버 데이터를 속성으로 활용하기 - https://merrily-code.tistory.com/53
• SSR 개념 이해와 Next.js로 실습까지 해보는 SSR 환경 구축하기 - https://velog.io/@jeff0720/Next.js-개념-이해-부터-실습까지-해보는-SSR-환경-구축