Skip to content

amannn/next-intl

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.



next-intl


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-only 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} ↵
                  }"
  }
}

→ Read the docs

Crowdin logo

Hosted on Vercel