next-intl

What is next-intl?

The next-intl package is designed to provide internationalization (i18n) support for Next.js applications. It allows developers to easily manage translations, handle locale routing, and format dates, numbers, and other content according to locale-specific rules.

What are next-intl's main functionalities?

Translation Management

This feature allows you to manage translations for different components. The `useTranslations` hook is used to fetch the translations for a specific namespace, and you can then use the translation keys to display localized text.

import { useTranslations } from 'next-intl';

export default function MyComponent() {
  const t = useTranslations('MyComponent');
  return <p>{t('hello')}</p>;
}

Locale Routing

This feature allows you to handle locale-specific routing in your Next.js application. By using the `useRouter` hook, you can programmatically change the locale and update the URL accordingly.

import { useRouter } from 'next/router';

export default function LocaleSwitcher() {
  const router = useRouter();
  const changeLocale = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };
  return (
    <div>
      <button onClick={() => changeLocale('en')}>English</button>
      <button onClick={() => changeLocale('fr')}>French</button>
    </div>
  );
}

Date and Number Formatting

This feature allows you to format dates, numbers, and other content according to locale-specific rules. The `useIntl` hook provides methods like `formatDate` to format dates in a localized manner.

import { useIntl } from 'next-intl';

export default function DateFormatter() {
  const intl = useIntl();
  const formattedDate = intl.formatDate(new Date(), { year: 'numeric', month: 'long', day: 'numeric' });
  return <p>{formattedDate}</p>;
}

Other packages similar to next-intl

react-intl

react-intl is a popular library for internationalizing React applications. It provides similar functionalities to next-intl, such as translation management and date/number formatting. However, it does not offer built-in support for Next.js-specific features like locale routing.

i18next

i18next is a powerful internationalization framework that can be used with various JavaScript libraries, including React. It offers extensive features for managing translations, handling pluralization, and more. While it is more versatile, it requires additional setup to integrate with Next.js compared to next-intl.

next-translate

next-translate is another Next.js-specific internationalization library. It provides similar functionalities to next-intl, such as translation management and locale routing. However, next-translate uses a different approach for loading translations and may have different performance characteristics.

README

next-intl

TODO

short icu guide

https://formatjs.io/docs/core-concepts/icu-syntax

same api for react attributes and children

make sure you have polyfills

cache constructor with ast?

// number (https://github.com/unicode-org/icu/blob/master/docs/userguide/format_parse/numbers/skeletons.md#examples) date https://formatjs.io/docs/intl-messageformat#datetime-skeleton select https://formatjs.io/docs/core-concepts/icu-syntax/#select-format get rid of key for rich text?

// optional component name – return all // otherwise - componentize

typically structure by components

biggest strength of this library is that it's hooks only. therefore the same API for attributes as well as in children

cache values as well? separate repo?

TODO:

• Pass currency to number?
• Relative time
• Check other features of react-intl