[nextjs] next.config.js 기초 정리

우선은 실무단계에서 기본적으로 크게 development 단계와 deployment 단계로 구분한다. 배포를 하는 setting과 개발 setting를 다르게 해야한다. dotenv를 많이 사용하여, env.dev와 env.prod 사용하여 환경변수 설정을 해도 되지만, frontend 개발자라면, 아래와 같이 next.config.js 로 설정하는 방법도 알아두자.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

위의 코드를 처음본다면, 이 글을 정독하기 바란다.

위의 형식과 다르게 함수를 사용하여 구성하는 것도 아래와 같이 가능하다. 12.1.0 버전 부터는 async function을 사용하는 것도 가능해졌다. 따라서 구현 상황에 따라 구현은 진행하면 된다.

// 일반 함수 사용
module.exports = (phase, { defaultConfig }) => {
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

// async 함수 사용
module.exports = async (phase, { defaultConfig }) => {
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

인자로 들어오는 phase 에 대해 먼저 알아보자.

phase 설정이 세팅되는 환경을 가지고 있다. 즉, phase를 사용하면, 개발환경인지 배포 환경인지를 분기하는 것이 가능하다.

PHASE_DEVELOPMENT_SERVER 활용하기

phase를 사용하는 기본 세팅은 아래와 같다.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

  return {
    /* config options for all phases except development here */
  }
}

if 분기로 나눠진 위/아래의 return 중, 위의 return 부분을 보면 개발 환경에서의 설정(config)를 넣는 부분이다. 아래 return 부분은 배포 환경에서의 설정(config)이다. 우리가 이러한 것을 배웠다고 해서 반드시 사용해야할 필요는 없다. 즉, 필수적으로 이해해야하는 부분은 아니라는 말이다. next.config.js 설정이 필요한지 필요하지 않는지에 대한 고민을 한 후에 사용을 하자. (모르고 시작하면, 개발 시간이 더 길어질 수 있음...) 추가로 next.config.js는 webpack, babel, typescript들로 해석이(parse) 되지 않는다.

reactStrictMode

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

쉽게 설명하면, 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다. nextjs가 아닌, react에서 관련 부분은 <Reacrt.StrictMode>를 하는 것과 같다고 할 수 있다.

기본적으로 Nextjs 문서에서는 strict mode를 활성화하는 것을 추천하기 때문에 관련 설정을 진행하고 프로젝트를 진행하도록 하자.

swcMinifty

swcMinifty이란 Terser와 비슷한 역할을 한다고 생각하면 된다. Terser의 역할은 필요없는 공백이나, 주석을 삭제하여 용량을 줄이고, 해당 스크립트를 해석할 수 없도록 암호화 하는 역할을 한다고 할 수 있다. 기본적으로 React나 Next는 기본 설정을 통해 build 파일을 만들면서, Terser의 역할을 할 수 있다.

이러한 역할에 대한 설정을 handling 할 수 있도록 하는 것이 swcMinifty라고 할 수 있다.

참고
https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
https://han-py.tistory.com/503