║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Supported Browsers description: Browser support and which JavaScript features are supported by Next.js.

Next.js supports modern browsers with zero configuration.

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

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:

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

Polyfills

We inject widely used polyfills, including:

• fetch() — Replacing: whatwg-fetch and unfetch.
• URL — Replacing: the url package (Node.js API).
• Object.assign() — Replacing: object-assign, object.assign, and core-js/object/assign.

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

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.

Custom Polyfills

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

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

import './polyfills'

In Pages Router

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

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} />
}

Conditionally loading polyfills

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

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
}

JavaScript Language Features

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

• Async/await (ES2017)
• Object Rest/Spread Properties (ES2018)
• Dynamic import() (ES2020)
• Optional Chaining (ES2020)
• Nullish Coalescing (ES2020)
• Class Fields and Static Properties (ES2022)
• and more!

TypeScript Features

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

Customizing Babel Config (Advanced)

You can customize babel configuration. Learn more here.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║