nextjs 12 babel에서 swc 로 갈아타기

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

Advanced Features: Next.js Compiler | Next.js

 

nextjs 12버전의 변화중의 하나는 컴파일러가 변경되었습니다

 

babel에서 rust를 사용하는 SWC로 변경이 되었습니다

 

 

새로바뀐 SWC는 기존의 babel 보다 17배나 빠르다고 하네요

 

실제로도 체감할수 있는 만큼 빨라진것 같습니다

 

 

babel에서 swc로 갈아타는 방법은 매우 쉽습니다

 

nextjs는 프로젝트가 .babelrc 파일을 가지고 있는 경우 babel을 사용하고 

 

그렇지 않은 경우는 swc를 사용하게 됩니다

 

.babelrc 파일을 프로젝트에서 삭제하고 next.config.js에 필요한 설정을 넣으시면 swc 적용완료입니다

 

 

 

꼭 필요한 babel 설정 중 하나인

 

babel-plugin-styled-components 는 styledCompoents 로 설정할수 있습니다

 

babel-plugin-transform-remove-console 는 removeConsole을 사용할수 있습니다

 

저는 기존 .bablerc의 설정을 next.config.js 에 이렇게 옮겨넣고 모든 설정을 마쳤네요

{
    swcMinify: true,
    compiler: {
      styledComponents: true,
      removeConsole: process.env.NODE_ENV === "production",
    }
 }

 

이렇게 쉬울수가!

 

Modularize Imports 라던가 실험적으로 제공되는 여러가지 기능들이 더 있으니 문서를 좀 더 꼼꼼히 읽어보셔도 좋습니다