Supported Browsers

Core Idea

Next.js supports modern browsers with zero configuration, injects only-when-needed polyfills, and allows targeting custom browsers via Browserslist.

Key Concepts

• Default supported browsers: Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+.
• Browserslist: configurable via package.json; defaults to ["chrome 111", "edge 111", "firefox 111", "safari 16.4"].
• Auto-injected polyfills: fetch(), URL, Object.assign() — only loaded for browsers that need them, and deduped if a dependency already includes them.
• Custom polyfills: App Router imports them via instrumentation-client.js/.ts; Pages Router via a top-level import in Custom <App> (pages/_app.tsx) or the specific component.
• Conditional polyfill loading: check feature presence at runtime and dynamically import() the polyfill only when missing (e.g. structuredClone).
• Supported JS features out of the box: Async/await, Object Rest/Spread, dynamic import(), Optional Chaining, Nullish Coalescing, Class Fields/Static Properties, and more.

Code Examples

import './polyfills'

• O que demonstra: forma padrão de incluir polyfills no App Router.

export const useAnalytics = () => {
  const tracker = useCallback(async (data: unknown) => {
    if (!('structuredClone' in globalThis)) {
      const mod = await import('polyfills/structured-clone')
      globalThis.structuredClone = mod.default
    }
  }, [])
  return tracker
}

• O que demonstra: carregamento condicional de polyfill só quando a feature nativa está ausente, isolado a uma seção específica da UI.

Key Takeaways

1. A maioria do tráfego web global não baixa os polyfills automáticos, porque Next.js só os serve pra browsers que precisam.
2. Pra IE11 ou browsers muito antigos, polyfills próprios são necessários e devem ser carregados condicionalmente pra não pesar o bundle de todo mundo.
3. TypeScript e Babel customizado são suportados nativamente, com docs dedicadas.

Connects To

• Next.js Compiler (ch449): SWC compila as features JS modernas listadas aqui.