Git Product home page Git Product logo

next-intl's Introduction

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

next-intl's People

Contributors

amannn avatar ahmedbaset avatar albertothedev avatar arochniak avatar apriltaoyvr avatar boris-arkenaar avatar tacomanator avatar grzegorzpokorski avatar hhongseungwoo avatar mismosmi avatar agustif avatar ahmdbst avatar mchccn avatar maxwoedl avatar stefanprobst avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.