The next-intl from jrdtechjourney

next-intl's Introduction

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

📣 Support for the App Router and Server Components has arrived →

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, cardinal & ordinal plurals, enum-based label selection and rich text.
📅 Dates, times & numbers: Apply appropriate formatting without worrying about server/client differences like time zones.
✅ Type-safe: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
💡 Hooks-based API: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
🚀 Next.js-native and performance-obsessed: App Router, Server Components, static rendering—pick the right tool for the right job, next-intl works everywhere.
⚔️ Internationalized routing: Provide unique pathnames per language and optionally localize pathnames for search engine optimization.

What does it look like?

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

// UserProfile.tsx
import {useTranslations} from 'next-intl';
 
export default function UserProfile({user}) {
  const t = useTranslations('UserProfile');
 
  return (
    <section>
      <h1>{t('title', {firstName: user.firstName})}</h1>
      <p>{t('membership', {memberSince: user.memberSince})}</p>
      <p>{t('followers', {count: user.numFollowers})}</p>
    </section>
  );
}

// en.json
{
  "UserProfile": {
    "title": "{username}'s profile",
    "membership": "Member since {memberSince, date, short}",
    "followers": "{count, plural, ↵
                    =0 {No followers yet} ↵
                    =1 {One follower} ↵
                    other {# followers} ↵
                  }"
  }
}