Next.js 프레임워크에서 배포 시 console.log를 자동으로 제거하거나 주석 처리하는 방법은 몇 가지가 있습니다. 이 작업은 코드에서 불필요한 console.log를 제거하여 배포된 애플리케이션의 성능을 향상시키고, 디버깅 정보를 외부로 노출하지 않도록 하는 데 도움이 됩니다.

1. Babel 플러그인 사용

babel-plugin-transform-remove-console 플러그인을 사용하여 배포 시 console.log를 제거할 수 있습니다. 이 플러그인은 Babel을 통해 컴파일되는 과정에서 모든 console 문을 제거합니다.

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

또는

yarn add babel-plugin-transform-remove-console --dev

설정

Next.js 프로젝트의 루트에 .babelrc 파일이 없다면 생성하고, 다음과 같이 설정을 추가합니다.

{
  "presets": ["next/babel"],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

위 설정은 production 환경에서만 console 문을 제거합니다. 즉, 로컬 개발 환경에서는 console.log를 사용할 수 있고, 배포 시에는 자동으로 제거됩니다.

2. Webpack 설정 수정 (Next.js 12 이하)

Next.js 12 이하에서는 Webpack의 설정을 통해 console.log를 제거할 수 있습니다. next.config.js 파일에 다음 설정을 추가합니다.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.optimization.minimizer.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        })
      );
    }
    return config;
  },
};

이 설정은 Webpack의 Terser 플러그인을 사용하여 클라이언트 사이드의 console.log를 제거합니다.

3. Custom ESLint 룰 사용

ESLint를 사용하여 console.log 사용을 금지하고, 이를 주석 처리하거나 코드에서 제거하도록 강제할 수도 있습니다.

ESLint 설정

.eslintrc.js 파일에 다음과 같이 설정합니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'no-console': 'warn', // 'error'로 설정하면 더 강제할 수 있음
  },
};

no-console 규칙을 warn 또는 error로 설정하면, console.log를 사용할 때 ESLint가 경고 또는 오류를 발생시켜 코드를 정리하도록 유도합니다.

이 방법들을 통해 console.log를 배포 시 자동으로 제거하거나 주석 처리할 수 있습니다.