Socket
Book a DemoInstallSign in
Socket

next-intl-masta

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-intl-masta

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

latest
Source
npmnpm
Version
3.0.1-beta.2
Version published
Maintainers
1
Created
Source



next-intl


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

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

// UserProfile.tsx
import {useTranslations} from 'next-intl';
 
export default function UserProfile({user}) {
  const t = useTranslations('UserProfile');
 
  return (
    <section>
      <h1>{t('title', {firstName: user.firstName})}</h1>
      <p>{t('membership', {memberSince: user.memberSince})}</p>
      <p>{t('followers', {count: user.numFollowers})}</p>
    </section>
  );
}
// en.json
{
  "UserProfile": {
    "title": "{username}'s profile",
    "membership": "Member since {memberSince, date, short}",
    "followers": "{count, plural, ↵
                    =0 {No followers yet} ↵
                    =1 {One follower} ↵
                    other {# followers} ↵
                  }"
  }
}

→ Read the docs

Keywords

react

FAQs

Package last updated on 27 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts