Production checklist

While the installation instructions are sufficient to use next-intl in your Next.js app, this checklist helps you ensure you're all set for production:

1. If you're using TypeScript, you can take advantage of autocompletion and type safety for message keys by setting up a type for your messages.
2. If you're formatting dates and times, a time zone should be configured. By default, dates are formatted according to the time zone of the environment, which can lead to markup mismatches if the server and the user are located in different time zones. By supplying the timeZone explicitly, you can ensure that dates and times are rendered the same way on the server as well as the client.
3. If you're formatting relative dates and times, a global value for now can be useful. This ensures that the server and client will render the same markup. Especially if you use caching for the responses of the server, the likelyhood of mismatches increases.
4. To achieve consistent date, time and number formatting, it might be useful to set up global formats which ensure consistent formatting across the app.
5. Please check the runtime requirements and optionally provide polyfills.

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:

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(',')
      }
    />
  );
}

Node

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