next-intl
Advanced tools
Package description
The next-intl package is designed to provide internationalization (i18n) support for Next.js applications. It allows developers to easily manage translations, handle locale routing, and format dates, numbers, and other content according to locale-specific rules.
Translation Management
This feature allows you to manage translations for different components. The `useTranslations` hook is used to fetch the translations for a specific namespace, and you can then use the translation keys to display localized text.
import { useTranslations } from 'next-intl';
export default function MyComponent() {
const t = useTranslations('MyComponent');
return <p>{t('hello')}</p>;
}Locale Routing
This feature allows you to handle locale-specific routing in your Next.js application. By using the `useRouter` hook, you can programmatically change the locale and update the URL accordingly.
import { useRouter } from 'next/router';
export default function LocaleSwitcher() {
const router = useRouter();
const changeLocale = (locale) => {
router.push(router.pathname, router.asPath, { locale });
};
return (
<div>
<button onClick={() => changeLocale('en')}>English</button>
<button onClick={() => changeLocale('fr')}>French</button>
</div>
);
}Date and Number Formatting
This feature allows you to format dates, numbers, and other content according to locale-specific rules. The `useIntl` hook provides methods like `formatDate` to format dates in a localized manner.
import { useIntl } from 'next-intl';
export default function DateFormatter() {
const intl = useIntl();
const formattedDate = intl.formatDate(new Date(), { year: 'numeric', month: 'long', day: 'numeric' });
return <p>{formattedDate}</p>;
}react-intl is a popular library for internationalizing React applications. It provides similar functionalities to next-intl, such as translation management and date/number formatting. However, it does not offer built-in support for Next.js-specific features like locale routing.
i18next is a powerful internationalization framework that can be used with various JavaScript libraries, including React. It offers extensive features for managing translations, handling pluralization, and more. While it is more versatile, it requires additional setup to integrate with Next.js compared to next-intl.
next-translate is another Next.js-specific internationalization library. It provides similar functionalities to next-intl, such as translation management and locale routing. However, next-translate uses a different approach for loading translations and may have different performance characteristics.
Readme
Internationalization (i18n) for Next.js that gets out of your way.
📣 Support for Next.js 13 and the App Router has arrived →
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.
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} ↵
}"
}
}
FAQs
Internationalization (i18n) for Next.js
The npm package next-intl receives a total of 250,638 weekly downloads. As such, next-intl popularity was classified as popular.
We found that next-intl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
uv, Python's new package manager, offers a faster and more efficient alternative to pip with features that simplify tooling, manage Python versions, and streamline development workflows.
Research
Security News
Socket researchers have uncovered 3.7 million fake GitHub stars, highlighting a growing threat linked to scams, fraud, and malware, with these campaigns rapidly increasing over the last six months.
Security News
Deno's Standard Library has stabilized after four years of development, offering developers a collection of well-maintained tools compatible with Deno, Node.js, Cloudflare Workers, and browsers with bundlers.
