[Next.js] 배포시 console 지우기

Next.js 을 이용해 production 환경에서 console 을 지우는 방법을 알아보겠습니다.

Next.js 에서 사용하기

기본 사용법

Next.js는 빌드 후 결과물에 console 이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있습니다.

next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결됩니다.

만약 removeConsole 을 조건 없이(process.env.NODE_ENV 없이 ) 그냥 true값으로 주면,
개발환경에서도 콘솔이 뜨지 않게 됩니다. 

 

특정 console 예외 방법

만약 모든 console 을 제거하는 게 아닌, 특정 console ( error, warn ) 은 띄어주고 싶다면 아래와 같이 작성하시면 됩니다.

 

혹시 배포를 하고 있는 경우에 env 파일에 있는 변수들을 따로 넣어주거나 .env 파일을 import 해주어야 하는 경우가 있을 것입니다.

하지만 next.config.mjs 에 저렇게만 설정을 하시면 따로 변수를 넣어주거나 하는 작업들을 하지 않고 자동으로 동작하게 됩니다.

 

그 외 궁금하신 분들은 공식 문서를 찾아보시면 좋습니다.

 

http://nextjs.org/docs/architecture/nextjs-compiler#remove-console

Architecture: Next.js Compiler | Next.js

 

React 에서도 적용하기

만약 여러분이 Next.js 에서만 사용하는 것이 아닌 React 에서도 사용하고 싶다면, 아래와 같은 방법을 적용할 수 있습니다.

 

플러그인 설치

npm install --save-dev babel-plugin-transform-remove-console

 

위 플러그인을 설치한 후, .babelrc 파일에 아래 코드를 추가하시면 됩니다.

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}