[NextJS] Babel 과 SWC 같이 사용하기

글쓰게된 계기

NextJS로 프로젝트를 하는 중인데, 내가 만든 라이브러리를 갖다 쓰려니까 오류가 발생했다. 무엇이 문제인지 확인해봤더니, Babel 로 트랜스파일링이 되어있는 라이브러리를 NextJS 프로젝트에 갖다 쓰는 것이 문제였다.

swc 와 babel

babel의 한계

• babel이 변경한 코드를 이해하기 어려운 편이다.
• polyfill을 사용해서 babel이 지원해주지 않는 범위까지 변환해주어야 한다.
• 다른 컴파일러보다 시간이 오래 걸린다.

SWC가 나오게 된 이유

NextJS 12 이전 버전에는 Babel을 사용했는데, 위와 같은 이유를 개선하기 위해 SWC 컴파일러를 도입했다.

SWC??

Rust로 작성된 컴파일러로, 컴파일시 매우 빠르게 동작한다. 웹사이트 최적화, 번들링, 컴파일 등 다양한 기능을 위해 SWC를 사용할 수 있다.

SWC의 장점

• 확장성
  NextJS에 이미 설치되어있는 SWC 사용 가능
• WebAssembly
  Rust의 WASM(WebAssembly) 지원으로 어떤 종류의 플랫폼에서도 Next JS 개발 가능
• 성능
  기존에 있던 컴파일러보다 훨씬 좋은 성능 제공
• 빠른 성장세
  커뮤니티가 빠르게 성장하여 점점 넓어지는 생태계 보유

NextJS 12 이전 버전 프로젝트에 적용하기

1. next@12 설치

npm install next@12

2. babel 설정 제거

• .babelrc 또는 babel.config.js 파일 제거가 필요하다. NextJS가 Babel을 인식하므로 파일을 지워줘야 한다.

3. next.config.js > 최적화 옵션 (추가 세팅)

module.exports = {
  swcMinify: true,
}

SWC와 Babel 같이 사용하기

주로 SWC를 기본 트랜스파일러로 사용하고 Babel을 특정 파일이나 모듈에만 적용한다. 방법은 다음과 같다.

1. .babelrc 또는 babel.config.js 파일 생성하여 설정

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

2. next.config.js 수정
Babel을 사용하여 특정 파일을 변환하고, SWC를 기본 최적화 도구로 유지하는 설정이다.

// next.config.js
// babel 사용할 패키지 설정 추가
const withTranspileModules = require('next-transpile-modules')([
  'react-scroll-header-loading'
]);

module.exports = withTranspileModules({
  reactStrictMode: true,
  swcMinify: true, // SWC 최적화 활성화
  webpack(config, { dev }) {
    // Babel 설정 추가
    config.module.rules.push({
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-transform-runtime'],
        },
      },
    });

    return config;
  },
});