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%