如何在 Next.js 中配置 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 的程式碼分割功能。