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.