支持的浏览器

Next.js 默认支持**现代浏览器**。

• Chrome 111+
• Edge 111+
• Firefox 111+
• Safari 16.4+

Browserslist

如果您想针对特定的浏览器或功能，Next.js 支持在您的 `package.json` 文件中配置 Browserslist。Next.js 默认使用以下 Browserslist 配置：

{
  "browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
}

Polyfills

我们注入了广泛使用的 Polyfills，包括：

• fetch() — 替换：`whatwg-fetch` 和 `unfetch`。
• URL — 替换：`url` 包 (Node.js API)。
• Object.assign() — 替换：`object-assign`、`object.assign` 和 `core-js/object/assign`。

如果您的任何依赖项包含这些 polyfills，它们将自动从生产构建中消除，以避免重复。

此外，为了减小包大小，Next.js 将只为需要这些 polyfills 的浏览器加载它们。全球绝大多数的网络流量将不会下载这些 polyfills。

自定义 Polyfills

如果您自己的代码或任何外部 npm 依赖项需要您的目标浏览器（例如 IE 11）不支持的功能，您需要自行添加 polyfills。

在 App Router 中

要包含 polyfills，您可以将它们导入到 `instrumentation-client.js` 文件中。

import './polyfills'

在 Pages Router 中

在这种情况下，您应该在您的自定义 `<App>` 或单个组件中为所需的**特定 polyfill** 添加一个顶级导入。

import './polyfills'
 
import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

有条件地加载 polyfills

最好的方法是将不支持的功能隔离到特定的 UI 部分，并在需要时有条件地加载 polyfill。

import { useCallback } from 'react'
 
export const useAnalytics = () => {
  const tracker = useCallback(async (data: unknown) => {
    if (!('structuredClone' in globalThis)) {
      import('polyfills/structured-clone').then((mod) => {
        globalThis.structuredClone = mod.default
      })
    }
 
    /* Do some work that uses structured clone */
  }, [])
 
  return tracker
}

JavaScript 语言特性

Next.js 允许您直接使用最新的 JavaScript 功能。除了ES6 功能，Next.js 还支持：

• Async/await (ES2017)
• 对象 Rest/Spread 属性 (ES2018)
• 动态 `import()` (ES2020)
• 可选链 (ES2020)
• 空值合并 (ES2020)
• 类字段 和 静态属性 (ES2022)
• 以及更多！

TypeScript 特性

Next.js 内置了 TypeScript 支持。在此处了解更多信息。

自定义 Babel 配置（高级）

您可以自定义 Babel 配置。在此处了解更多信息。