Skip to content

A minimal, but complete solution for internationalization in Next.js apps. 🌐

License

Notifications You must be signed in to change notification settings

jorgebef/next-intl

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

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

Repository files navigation



next-intl


A minimal, but complete solution for internationalization in Next.js apps.

Gzipped size Tree shaking supported


πŸš€ New ✨: next-intl is adding support for Next.js 13 and the app directory. A preview version with support for React Server Components is now available for early adopters.


Features

This library complements the internationalized routing capabilities of Next.js by managing translations and providing them to components.

  • 🌟 Proven ICU syntax: This covers interpolation, plurals, ordinal pluralization, label selection based on enums and rich text. I18n is an essential part of the user experience, therefore this library doesn't compromise on flexibility and never leaves you behind when you need to fine tune a translation.
  • πŸ“… Built-in date, time and number formatting: You can use global formats for a consistent look & feel of your app and integrate them with translations.
  • πŸ’‘ Hooks-only API: This ensures that you can use the same API for children as well as for attributes which expect strings.
  • βœ… Type-safe: If you're using TypeScript, you'll benefit from autocompletion for available message keys and compile-time errors for typos.
  • βš”οΈ Battle-tested building blocks: This library is a minimal wrapper around built-in browser APIs and supplemental lower-level APIs from Format.JS.
  • πŸš€ Fast: By integrating with both static as well as server side rendering you always get the best possible performance from your app.

What does it look like?

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

// LatestFollower.js
function LatestFollower({user}) {
  const t = useTranslations('LatestFollower');

  return (
    <>
      <Text>{t('latestFollower', {username: user.name})}</Text>
      <IconButton aria-label={t('followBack')} icon={<FollowIcon />} />
    </>
  );
}
// en.json
{
  "LatestFollower": {
    "latestFollower": "{username} started following you",
    "followBack": "Follow back"
  }
}

About

A minimal, but complete solution for internationalization in Next.js apps. 🌐

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 90.7%
  • JavaScript 9.0%
  • CSS 0.3%