支持的浏览器Next.js 默认支持**现代浏览器**。
Chrome 111+
Edge 111+
Firefox 111+
Safari 16.4+
Browserslist
如果您想针对特定的浏览器或功能，Next.js 支持在您的 `package.json` 文件中配置 Browserslist。Next.js 默认使用以下 Browserslist 配置：
package.json{
"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` 文件中。
instrumentation-client.tsimport './polyfills'
在 Pages Router 中
在这种情况下，您应该在您的自定义 `
pages/_app.tsxTypeScriptJavaScriptTypeScriptimport './polyfills'
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return
}
有条件地加载 polyfills
最好的方法是将不支持的功能隔离到特定的 UI 部分，并在需要时有条件地加载 polyfill。
hooks/analytics.tsTypeScriptJavaScriptTypeScriptimport { 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 配置。在此处了解更多信息。