Runtime requirements
This page outlines requirements for your environment to use next-intl
.
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.js
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.