Next.js 支持现代浏览器，无需任何配置。
如果您想针对特定浏览器或功能，Next.js 支持在您的 package.json 文件中进行 Browserslist 配置。Next.js 默认使用以下 Browserslist 配置：
{
"browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
}我们注入了 广泛使用的 polyfills，包括：
whatwg-fetch 和 unfetch。url 包 (Node.js API)。object-assign、object.assign 和 core-js/object/assign。如果您的任何依赖项包含这些 polyfills，它们将自动从生产构建中移除，以避免重复。
此外，为了减小打包大小，Next.js 只会为需要这些 polyfills 的浏览器加载它们。全球大部分网络流量都不会下载这些 polyfills。
如果您自己的代码或任何外部 npm 依赖项需要您的目标浏览器不支持的功能（例如 IE 11），您需要自行添加 polyfills。
要包含 polyfills，您可以将它们导入到 instrumentation-client.js 文件 中。
import './polyfills'在这种情况下，您应该在您的 自定义 <App> 或单个组件中为所需的特定 polyfill 添加一个顶层导入。
import './polyfills'
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}import './polyfills'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}最佳方法是将不支持的功能隔离到特定的 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
}import { useCallback } from 'react'
export const useAnalytics = () => {
const tracker = useCallback(async (data) => {
if (!('structuredClone' in globalThis)) {
import('polyfills/structured-clone').then((mod) => {
globalThis.structuredClone = mod.default
})
}
/* Do some work that uses structured clone */
}, [])
return tracker
}Next.js 允许您开箱即用最新的 JavaScript 特性。除了 ES6 特性 外，Next.js 还支持：
import() (ES2020)Next.js 内置了 TypeScript 支持。在此了解更多。
您可以自定义 Babel 配置。在此了解更多。