next.js Compiler

Next.js의 컴파일러는 바벨 대신에 Rust 기반의 SWC를 JS 번들링에 사용한다. 이는 바벨보다 17배 빠르며, Next.js 12부터 디폴트로 쓰인다. 만약 바벨을 사용하고 싶다면, 다음을 참고하면 된다.

Next.js Compiler의 자세한 내용은 공식 가이드에 나와있다. 이 글에서는 주로 사용할만한 요소만 요약하여 정리하였다.

Supported Features

• Styled Components : bebel-plugin-styled-components와 연계하여 styled-components를 위한 바벨 설정을 next.js compiler에서도 사용할 수 있다.

• Jest : css auto mocking, loading .env 등을 통해 Jest를 이용한 테스트 설정을 간편하게 해준다.

• Relay : Graph QL 클라이언트 라이브러리인 Relay에 대한 설정을 제공한다.

• Remove React Properties : babel-plugin-react-remove-properties와 비슷하게 JSX 프로퍼티를 제거한다. 테스팅에 용이하다.

• Remove Console : 간단한 설정으로 미처 지우지 못한 콘솔 로그를 빌드과정에서 지워준다.

  1 2 3 4 5 6

  // next.config.js module.exports = { compiler: { removeConsole: true, }, }

  일부 로그는 exclude를 통해 남길 수 있다.

  1 2 3 4 5 6 7 8

  // next.config.js module.exports = { compiler: { removeConsole: { exclude: ['error'], }, }, }

• Emotion : `@emotion/babel-plugin의 설정을 next.config.js에서 대신 할 수 있다.

• Modularize Imports : 패키지를 불러올 때, “barrel file” 을 default import 처럼 사용할 수 있게 해준다.

  1 2 3 4

  import { Row, Grid as MyGrid } from 'react-bootstrap' -> import Row from 'react-bootstrap/Row' import MyGrid from 'react-bootstrap/Grid'

  이는 다음과 같이 설정한다.

  1 2 3 4 5 6 7 8

  // next.config.js module.exports = { modularizeImports: { 'react-bootstrap': { transform: 'react-bootstrap/', } } }

  좀 더 다양한 설정을 보기 위해선 공식문서 참조

Experimental Features

• Minifier debug options : minifier 옵션이 아직 실험단계이기 때문에, 그동안 디버그 목적으로 minifier의 설정을 변경할 수 있는 방법을 제공한다. minifier가 stable 단계에 돌입하면, 이 방법은 사라진다.

• SWC Plugins : WASM로 쓰여진 SWC 플러그인을 사용하여 swc의 코드 트랜스포메이션 과정을 변경할 수 있다.

  1 2 3 4 5 6 7 8 9 10 11 12 13

  // next.config.js module.exports = { experimental: { swcPlugins: [ [ 'plugin', { ...pluginOptions, }, ], ], }, }

  swcPlugins는 튜플 배열을 받는다. 첫번째는 plugin으로의 path를 받고, 두번째로는 plugin option 을 받는다. 이때 path는 npm module 패키지명이나 .wasm 바이너리 파일의 절대 경로를 지정할 수 있다.

Unsupported Features

만약 어플리케이션에서 .babelrc를 가지고 있다면, next.js는 자동으로 next.js compiler 대신 Bebel을 사용한다.

출처

https://nextjs.org/docs/advanced-features/compiler