Runtime requirements

Browser

Based on the features you're using, you have to make sure your browser supports the following APIs:

Basic usage: Intl.Locale (compatibility (opens in a new tab))
Date & time formatting: Intl.DateTimeFormat (compatibility (opens in a new tab))
Number formatting: Intl.NumberFormat (compatibility (opens in a new tab))
Pluralization: Intl.PluralRules (compatibility (opens in a new tab))
Relative time formatting: Intl.RelativeTimeFormat (compatibility (opens in a new tab))
List formatting: Intl.ListFormat (compatibility (opens in a new tab))

If you target a browser that doesn't support all the required APIs, consider using polyfills. Polyfill.io (opens in a new tab) is a valuable solution for this that helps you to load only the polyfills you need for a given locale.

Example:

IntlPolyfills.tsx

import {useLocale} from 'next-intl';
import Script from 'next/script';
 
// Use this component in your Next.js custom `_app`
function IntlPolyfills() {
  const locale = useLocale();
 
  const polyfills = [
    'Intl',
    'Intl.Locale',
    'Intl.DateTimeFormat',
    `Intl.DateTimeFormat.~locale.${locale}`,
    `Intl.NumberFormat`,
    `Intl.NumberFormat.~locale.${locale}`,
    'Intl.PluralRules',
    `Intl.PluralRules.~locale.${locale}`,
    'Intl.RelativeTimeFormat',
    `Intl.RelativeTimeFormat.~locale.${locale}`,
    'Intl.ListFormat',
    `Intl.ListFormat.~locale.${locale}`
  ];
 
  return (
    <Script
      strategy="beforeInteractive"
      src={
        'https://polyfill.io/v3/polyfill.min.js?features=' + polyfills.join(',')
      }
    />
  );
}

⚠️

Note that Polyfill.io doesn't support every locale. You can find a list of the available polyfills in the polyfill-service GitHub repository (opens in a new tab) (e.g. search for Intl.DateTimeFormat.~locale.de-AT).

Node

The minimum required version is Node.js 13. Starting from this version, all required APIs are available.

Core library Overview