Next.js 中文网

主题

支持的浏览器 ​

¥Supported Browsers

Next.js 以零配置支持现代浏览器。

¥Next.js supports modern browsers with zero configuration.

  • Chrome 64+

  • Edge 79+

  • 火狐浏览器 67+

    ¥Firefox 67+

  • Opera 51+

  • Safari 12+

浏览器列表 ​

¥Browserslist

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

¥If you would like to target specific browsers or features, Next.js supports Browserslist configuration in your package.json file. Next.js uses the following Browserslist configuration by default:

Polyfills ​

我们注入 广泛使用的填充材料，包括：

¥We inject widely used polyfills, including:

如果你的任何依赖包含这些填充，它们将自动从生产版本中删除以避免重复。

¥If any of your dependencies include these polyfills, they’ll be eliminated automatically from the production build to avoid duplication.

此外，为了减少包的大小，Next.js 将只为需要它们的浏览器加载这些填充代码。全球大部分网络流量都不会下载这些 polyfill。

¥In addition, to reduce bundle size, Next.js will only load these polyfills for browsers that require them. The majority of the web traffic globally will not download these polyfills.

自定义 Polyfill ​

¥Custom Polyfills

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

¥If your own code or any external npm dependencies require features not supported by your target browsers (such as IE 11), you need to add polyfills yourself.

应用内路由 ​

¥In App Router

要包含 polyfill，你可以将它们导入 instrumentation-client.js file。

¥To include polyfills, you can import them into the instrumentation-client.js file.

ts
import './polyfills'

页面路由 ​

¥In Pages Router

在这种情况下，你应该为 定制 <App> 或单个组件中所需的特定 polyfill 添加顶层导入。

¥In this case, you should add a top-level import for the specific polyfill you need in your Custom <App> or the individual component.

tsx
import './polyfills'

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

有条件地加载 polyfill ​

¥Conditionally loading polyfills

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

¥The best approach is to isolate unsupported features to specific UI sections and conditionally load the polyfill if needed.

ts
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 语言特性 ​

¥JavaScript Language Features

Next.js 允许你立即使用最新的 JavaScript 功能。除了 ES6 特性 之外，Next.js 还支持：

¥Next.js allows you to use the latest JavaScript features out of the box. In addition to ES6 features, Next.js also supports:

TypeScript 功能 ​

¥TypeScript Features

Next.js 具有内置的 TypeScript 支持。在这里了解更多。

¥Next.js has built-in TypeScript support. Learn more here.

自定义 Babel 配置（高级） ​

¥Customizing Babel Config (Advanced)

你可以自定义 babel 配置。在这里了解更多。

¥You can customize babel configuration. Learn more here.