next-intl

Internationalization (i18n) for Next.js that gets out of your way.

Next.jsInternationalization i18n
amannn/next-intlnext-intl-docs.vercel.appnext-intl

README

next-intl


Internationalization for Next.js that gets out of your way.


📣 Support for Next.js 13 and the app directory is coming →


Features


Internationalization is an essential part of the user experience. next-intl gives you everything you need to get language subtleties right and has always got your back whenever you need to fine-tune a translation.

- 🌟 ICU message syntax: Localize your messages with interpolation, plurals, ordinal pluralization, enum-based label selection, and rich text.
- 📅 Dates, times & numbers: Use global formats for a consistent look & feel of your app and apply fine-tuning as necessary.
- ✅ Type-safe: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
- 💡 Hooks-only API: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
- 🚀 Fast: Get the best performance from your app by supporting internationalization on both static and dynamic pages.
- ⚔️ Standards-based: Use the best parts of built-in JavaScript APIs and supplemental lower-level APIs from Format.JS.

What does it look like?


This library is based on the premise that messages can be grouped by namespaces (typically a component name).

  1. ```jsx
  2. // UserDetails.tsx
  3. import {useTranslations, useFormatter} from 'next-intl';
  5. function UserDetails({user}) {
  6.   const t = useTranslations('UserDetails');
  7.   const format = useFormatter();
  9.   return (
  10.     <section>
  11.       <h2>{t('title')}</h2>
  12.       <p>{t('followers', {count: user.followers.length})}</p>
  13.       <p>{t('lastSeen', {time: format.relativeTime(user.lastSeen)})</p>
  14.       <Image alt={t('portrait', {username: user.name})} src={user.portrait} />
  15.     </section>
  16.   );
  17. }
  18. ```

  1. ```js
  2. // en.json
  3. {
  4.   "UserDetails": {
  5.     "title": "User details",
  6.     "followers": "{count, plural, ↵
  7.                     =0 {No followers yet} ↵
  8.                     =1 {One follower} ↵
  9.                     other {# followers} ↵
  10.                   }",
  11.     "lastSeen": "Last seen {time}",
  12.     "portrait": "Portrait of {username}"
  13.   }
  14. }
  15. ```

→ Read the docs