Babel

Next.js는 앱에 next/babel 프리셋을 포함하고 있으며, 여기에는 React 애플리케이션과 서버 사이드 코드를 컴파일하는 데 필요한 모든 것이 포함되어 있습니다. 그러나 기본 Babel 구성을 확장하는 것도 가능합니다.

Adding Presets and Plugins

시작하려면 프로젝트의 루트 디렉터리에 .babelrc 파일(또는 babel.config.js)을 정의하기만 하면 됩니다. 이러한 파일이 발견되면 진실의 원천으로 간주되므로 Next.js에 필요한 next/babel 프리셋도 정의해야 합니다.

다음은 .babelrc 파일의 예입니다:

{
  "presets": ["next/babel"],
  "plugins": []
}

next/babel에 포함된 프리셋에 대해 자세히 알아보려면 이 파일 (opens in a new tab)을 참조하십시오.

구성 없이 프리셋/플러그인을 추가하려면 다음과 같이 할 수 있습니다:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

Customizing Presets and Plugins

사용자 정의 구성을 사용하여 프리셋/플러그인을 추가하려면 다음과 같이 next/babel 프리셋에서 수행하십시오:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

각 구성에 사용할 수 있는 옵션에 대해 자세히 알아보려면 Babel의 문서 (opens in a new tab) 사이트를 방문하십시오.

알아두면 좋은 점:

• Next.js는 서버 사이드 컴파일에 현재 Node.js 버전 (opens in a new tab)을 사용합니다.
• "preset-env"의 modules 옵션은 false로 유지해야 하며, 그렇지 않으면 webpack 코드 분할이 비활성화됩니다.