Babel

Next.js 已為您的應用程式加入了 next/babel 預設集，其中包含編譯 React 應用程式和伺服器端程式碼所需的一切。但如果您想擴展預設的 Babel 配置，也是可行的。

加入預設集與外掛

首先，您只需在專案的根目錄中定義一個 .babelrc 檔案（或 babel.config.js）。如果找到此類檔案，它將被視為 唯一來源，因此它也需要定義 Next.js 所需的內容，也就是 next/babel 預設集。

以下是一個 .babelrc 檔案的範例：

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

您可以查看此檔案來了解 next/babel 所包含的預設集。

若要加入預設集或外掛 但不進行配置，可以這樣做：

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

自訂預設集與外掛

若要加入 帶有自訂配置 的預設集或外掛，請在 next/babel 預設集中進行如下設定：

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

要了解每個配置的可用選項，請參閱 babel 的文件網站。

須知事項：

• Next.js 使用 當前 Node.js 版本進行伺服器端編譯。
• "preset-env" 中的 modules 選項應保持為 false，否則 webpack 的程式碼分割功能將被關閉。