<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/FRONTEND"><span>FRONTEND</span></a></p><h3>nextjs 12 babel에서 swc 로 갈아타기</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 10. 25. 20:27</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16"><a href="https://nextjs.org/docs/advanced-features/compiler" target="_blank" rel="noopener">https://nextjs.org/docs/advanced-features/compiler</a></p>
<figure id="og_1666606837188" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Advanced Features: Next.js Compiler | Next.js" data-og-description="Learn about the Next.js Compiler, written in Rust, which transforms and minifies your Next.js application." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/advanced-features/compiler" data-og-url="https://nextjs.org/docs/advanced-features/compiler" data-og-image="https://scrap.kakaocdn.net/dn/uMNSd/hyQhHPV6WU/Qqn2v3gkRjWAlNpcxvdwsK/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"><a href="https://nextjs.org/docs/advanced-features/compiler" target="_blank" rel="noopener" data-source-url="https://nextjs.org/docs/advanced-features/compiler">

<div>
<p data-ke-size="size16">Advanced Features: Next.js Compiler | Next.js</p>
<p data-ke-size="size16">Learn about the Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.</p>
<p data-ke-size="size16">nextjs.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/uMNSd/hyQhHPV6WU/Qqn2v3gkRjWAlNpcxvdwsK/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"></figure>

<p data-ke-size="size16">nextjs 12버전의 변화중의 하나는 컴파일러가 변경되었습니다</p>

<p data-ke-size="size16">babel에서 rust를 사용하는 SWC로 변경이 되었습니다</p>


<p data-ke-size="size16">새로바뀐 SWC는 기존의 babel 보다 17배나 빠르다고 하네요</p>

<p data-ke-size="size16">실제로도 체감할수 있는 만큼 빨라진것 같습니다</p>


<p data-ke-size="size16">babel에서 swc로 갈아타는 방법은 매우 쉽습니다</p>

<p data-ke-size="size16">nextjs는 프로젝트가 .babelrc 파일을 가지고 있는 경우 babel을 사용하고&nbsp;</p>

<p data-ke-size="size16">그렇지 않은 경우는 swc를 사용하게 됩니다</p>

<p data-ke-size="size16">.babelrc 파일을 프로젝트에서 삭제하고 next.config.js에 필요한 설정을 넣으시면 swc 적용완료입니다</p>



<p data-ke-size="size16">꼭 필요한 babel 설정 중 하나인</p>

<p data-ke-size="size16">babel-plugin-styled-components 는 styledCompoents 로 설정할수 있습니다</p>

<p data-ke-size="size16">babel-plugin-transform-remove-console 는 removeConsole을 사용할수 있습니다</p>

<p data-ke-size="size16">저는 기존 .bablerc의 설정을 next.config.js 에 이렇게 옮겨넣고 모든 설정을 마쳤네요</p>
<pre id="code_1666607067339" data-ke-language="javascript" data-ke-type="codeblock"><code>{
    swcMinify: true,
    compiler: {
      styledComponents: true,
      removeConsole: process.env.NODE_ENV === "production",
    }
 }</code></pre>

<p data-ke-size="size16">이렇게 쉬울수가!</p>

<p data-ke-size="size16">Modularize Imports 라던가&nbsp;실험적으로 제공되는 여러가지 기능들이 더 있으니 문서를 좀 더 꼼꼼히 읽어보셔도 좋습니다</p>



            
            
                </div>
            

                
              </article></div>

나를 찾는 아이

Kyoung min, Kim

https://nextjs.org/docs/advanced-features/compiler
 
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 라던가 실험적으로 제공되는 여러가지 기능들이 더 있으니 문서를 좀 더 꼼꼼히 읽어보셔도 좋습니다

nextjs 12 babel에서 swc 로 갈아타기

댓글