Skip to content

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

License

Notifications You must be signed in to change notification settings

naeem-qv/next-intl

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

Gzipped size Tree shaking supported


πŸ“£ Support for Next.js 13 and the App Router 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, plurals, ordinal pluralization, 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.
  • πŸš€ 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).

// UserDetails.tsx
import {useTranslations, useFormatter} from 'next-intl';
 
function UserDetails({user}) {
  const t = useTranslations('UserDetails');
  const format = useFormatter();
 
  return (
    <section>
      <h2>{t('title')}</h2>
      <p>{t('followers', {count: user.followers.length})}</p>
      <p>{t('lastSeen', {time: format.relativeTime(user.lastSeen)})</p>
      <Image alt={t('portrait', {username: user.name})} src={user.portrait} />
    </section>
  );
}
// en.json
{
  "UserDetails": {
    "title": "User details",
    "followers": "{count, plural, ↡
                    =0 {No followers yet} ↡
                    =1 {One follower} ↡
                    other {# followers} ↡
                  }",
    "lastSeen": "Last seen {time}",
    "portrait": "Portrait of {username}"
  }
}
Crowdin logo

Hosted on Vercel

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.4%
  • JavaScript 0.6%