Skip to content

amannn/next-intl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Dec 20, 2024
0b484fb Β· Dec 20, 2024
Dec 11, 2024
Dec 13, 2024
Dec 16, 2024
Dec 11, 2024
Dec 20, 2024
Jun 12, 2024
Oct 23, 2024
Sep 26, 2024
May 24, 2024
Dec 20, 2024
Oct 17, 2024
Jun 12, 2024
Dec 11, 2024
Dec 20, 2024
Oct 24, 2024
Dec 6, 2024
Nov 8, 2024
Oct 23, 2024

Repository files navigation

Internationalization (i18n) for Next.js

Features

Internationalization (i18n) is an essential part of the user experience, therefore next-intl gives you all the parts you need to get language nuances right.

  • 🌟 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?

// 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": "{firstName}'s profile",
    "membership": "Member since {memberSince, date, short}",
    "followers": "{count, plural, ↡
                    =0 {No followers yet} ↡
                    =1 {One follower} ↡
                    other {# followers} ↡
                  }"
  }
}
Crowdin logo

Hosted on Vercel