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