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 程式碼分割將被關閉。