https://github.com/amannn/next-intl

🌐 Internationalization (i18n) for Next.js
https://github.com/amannn/next-intl

date-formatting i18n next react

Last synced: about 4 hours ago
JSON representation

🌐 Internationalization (i18n) for Next.js

• Host: GitHub
• URL: https://github.com/amannn/next-intl
• Owner: amannn
• License: mit
• Created: 2020-11-20T11:24:11.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T09:02:59.000Z (2 months ago)
• Last Synced: 2024-10-29T09:08:08.212Z (2 months ago)
• Topics: date-formatting, i18n, next, react
• Language: TypeScript
• Homepage: https://next-intl-docs.vercel.app
• Size: 63.8 MB
• Stars: 2,495
• Watchers: 12
• Forks: 228
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  

    

      

      

      

    

  

  


  




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

```jsx

// UserProfile.tsx

import {useTranslations} from 'next-intl';

export default function UserProfile({user}) {

  const t = useTranslations('UserProfile');

  return (

    

      
{t('title', {firstName: user.firstName})}

      
{t('membership', {memberSince: user.memberSince})}

      
{t('followers', {count: user.numFollowers})}

    

  );

}

```


```js

// 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} ↵

                  }"

  }

}

```

### [→ Read the docs](https://next-intl.dev)



  

    

  

  


  
Hosted on Vercel