支援的瀏覽器

Next.js 無需配置即可支援現代瀏覽器：

Chrome 64+
Edge 79+
Firefox 67+
Opera 51+
Safari 12+

Browserslist

如果您需要針對特定瀏覽器或功能進行設定，Next.js 支援在 package.json 檔案中設定 Browserslist。Next.js 預設使用以下 Browserslist 配置：

package.json

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

Polyfills

我們會自動注入廣泛使用的 polyfill，包括：

fetch() — 取代：whatwg-fetch 和 unfetch。
URL — 取代：url 套件 (Node.js API)。
Object.assign() — 取代：object-assign、object.assign 和 core-js/object/assign。

如果您的依賴套件中已包含這些 polyfill，它們會在生產環境建置時自動移除以避免重複。

此外，為了減少打包體積，Next.js 只會在需要這些 polyfill 的瀏覽器中載入它們。全球大部分的網路流量都不會下載這些 polyfill。

自訂 Polyfills

如果您的程式碼或任何外部 npm 依賴套件需要使用目標瀏覽器不支援的功能（例如 IE 11），您需要自行添加 polyfill。

在這種情況下，您應該在自訂 <App> 或個別元件中，為您需要的特定 polyfill 添加頂層導入。

JavaScript 語言功能

Next.js 讓您可以直接使用最新的 JavaScript 功能。除了 ES6 功能外，Next.js 還支援：

Async/await (ES2017)
物件其餘/展開屬性 (ES2018)
動態 import() (ES2020)
可選鏈結 (ES2020)
空值合併運算子 (ES2020)
類別欄位和靜態屬性 (stage 3 提案的一部分)
以及其他更多功能！

除了客戶端的 fetch()，Next.js 也會在 Node.js 環境中尚未支援 fetch() 時自動注入 polyfill。它使用 undici，與 Node.js 本身使用的實作相同。您可以在伺服器端程式碼（例如 getStaticProps/getServerSideProps）中使用 fetch()，而無需使用 isomorphic-unfetch 或 node-fetch 等 polyfill。

TypeScript 功能

Next.js 內建支援 TypeScript。了解更多。

自訂 Babel 配置 (進階)

您可以自訂 Babel 配置。了解更多。