Browse by type
<img alt="next-intl" src="https://github.com/amannn/next-intl/raw/v4.14.3/media/logo.svg" width="600">
Internationalization for Next.js.
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.
// 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>
{t('membership', {memberSince: user.memberSince})}
{t('followers', {count: user.numFollowers})}
</section>
);
}
// 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} ↵
}"
}
}
As an app grows, messages may drift and become inconsistent.
A companion tool, eloqnt/cli, catches this by analyzing your source code and messages statically:
$ eloqnt lint
messages/de.json
│
│ "UserProfile.title": "Dein Profil"
│ ─┬──────────
│ ╰─ Inconsistent ICU arguments: missing {firstName} (inconsistent-args)
│
│ "UserProfile.membership": "Member since {memberSince, date, short}"
│ ─┬──────────────────────
│ ╰─ Missing translation for de (missing-translation)
✗ 1 error
! 1 warning
→ Rule details: https://cli.eloqnt.dev/docs/lint-rules/<rule>
→ Run `eloqnt translate` to fill in 1 missing translation
It can optionally also fill in missing translations with eloqnt translate, using your source code as context.
Hosted on Vercel
browse all types & interfaces →
$ claude mcp add next-intl \
-- python -m otcore.mcp_server <graph>