Runtime requirements
Browser
The source code of next-intl
is compiled for the same browsers that Next.js supports (opens in a new tab).
Based on the features you're using, you have to make sure your target browsers support 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.
Cloudflare provides a polyfill service (opens in a new tab) that you can use to load the necessary polyfills for a given locale.
Example:
import {useLocale} from 'next-intl';
import Script from 'next/script';
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://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=' +
polyfills.join(',')
}
/>
);
}
Note that the polyfill service doesn't support every locale. You can find a
list of the available polyfills in the polyfill-service
repository (opens in a new tab)
(e.g. search for Intl.DateTimeFormat.~locale.de-AT
).
Node.js
The minimum version to support all relevant Intl
APIs is Node.js 13. Starting from this version, all required APIs are available.