next-intl vs i18next vs Lingui: Best i18n Library for React (2026)
Internationalization (i18n) is one of those features that's painful to add retroactively. Choose the right library early and it's seamless. Choose wrong and you're refactoring hundreds of components.
In 2026, next-intl, react-i18next, and Lingui represent three distinct approaches for React apps.
Quick Comparison
| Feature | next-intl | react-i18next | Lingui |
|---|---|---|---|
| Framework | Next.js only | Any React (+ Next.js) | Any React (+ Next.js) |
| App Router | First-class | Good (via next-i18next) | Good |
| Server Components | Native support | Requires setup | Good |
| Bundle size | ~14KB | ~25KB (with i18next) | ~5KB |
| Message format | ICU | Custom + ICU plugin | ICU |
| Type safety | Excellent | Good (with plugin) | Excellent |
| Extraction | Manual | Manual (+ tools) | Automatic (CLI) |
| Plurals | ICU standard | Built-in | ICU standard |
| Community | Growing fast | Largest | Moderate |
| Learning curve | Low (Next.js devs) | Moderate | Moderate |
next-intl: Built for Next.js
next-intl is purpose-built for Next.js with first-class support for the App Router, Server Components, and middleware-based locale detection.
Strengths
Next.js native. Designed specifically for Next.js's architecture. Server Components, route-based locale switching, and middleware integration work out of the box.
// app/[locale]/page.tsx
import { useTranslations } from 'next-intl';
export default function Home() {
const t = useTranslations('Home');
return <h1>{t('title')}</h1>;
}
ICU message format. Uses the industry-standard ICU format for plurals, gender, select, and number/date formatting.
{
"Home": {
"title": "Welcome to {appName}",
"items": "You have {count, plural, =0 {no items} one {# item} other {# items}}"
}
}
Type-safe translations. TypeScript integration catches missing translation keys at compile time.
Middleware locale detection. Automatic locale detection from Accept-Language headers, cookies, or URL prefix.
Small bundle. ~14KB gzipped — lighter than i18next.
Weaknesses
- Next.js only. If you switch frameworks, you switch i18n libraries.
- Smaller ecosystem than i18next. Fewer plugins, translation management integrations.
- No automatic extraction. You manually maintain translation files (or use third-party tools).
- Newer project. Less battle-tested at enterprise scale.
Best For
Next.js applications (App Router). The default choice for new Next.js projects needing i18n.
react-i18next: The Established Standard
i18next is the most widely used JavaScript i18n framework, with react-i18next providing the React integration.
Strengths
Ecosystem. The largest i18n ecosystem: plugins for backends (fetch translations from API), caching, language detection, and translation management (Locize, Crowdin, Phrase).
Framework-agnostic. i18next works in React, Vue, Angular, Node.js, vanilla JS — everywhere. Learn once, use anywhere.
Powerful features. Namespaces (split translations into modules), lazy loading (load translations on demand), fallback chains (language → region → default), context-based translations.
Battle-tested. Used by thousands of production apps including large enterprises. Edge cases are well-documented.
Weaknesses
- Larger bundle. ~25KB with i18next core + react-i18next.
- Next.js App Router setup is verbose. Requires more configuration than next-intl for Server Components.
- Init configuration. The initial setup with backends, detection, and namespaces can be overwhelming.
- Less type-safe by default. Type safety requires additional setup or plugins.
Best For
Multi-framework projects, apps needing advanced features (lazy loading, namespaces), or teams already familiar with i18next.
Lingui: The Lightweight Alternative
Lingui takes a different approach: write translations inline with your components and extract them automatically with a CLI tool.
Strengths
Tiny runtime. ~5KB gzipped. The smallest bundle of the three.
Automatic extraction. Write translations in your code, run lingui extract, and translation files are generated automatically. No manual key management.
import { Trans, t } from '@lingui/macro';
function Welcome({ name }) {
return (
<div>
<Trans>Welcome, {name}!</Trans>
<input placeholder={t`Search...`} />
</div>
);
}
ICU message format. Full ICU support for plurals, select, and formatting.
Compile-time optimization. Lingui compiles messages at build time, resulting in optimal runtime performance.
Type safety. TypeScript support with compile-time checking of message catalogs.
Weaknesses
- Macro-based API. Requires a Babel/SWC plugin for the
<Trans>macro. Adds a build step. - Smaller community than i18next.
- Fewer integrations with translation management platforms.
- Learning curve for the macro-based approach if unfamiliar with compile-time transforms.
Best For
Performance-sensitive apps where bundle size matters. Teams who prefer inline translations over key-based lookups.
Key Decision Points
Next.js App Router?
→ next-intl. Purpose-built, minimal setup, Server Components support.
Multiple frameworks or non-Next.js?
→ react-i18next. Framework-agnostic, largest ecosystem.
Bundle size is critical?
→ Lingui. 5KB runtime is unbeatable.
Need translation management integration?
→ react-i18next. Best integration with Locize, Crowdin, Phrase, and other TMS platforms.
Want automatic extraction?
→ Lingui. lingui extract generates translation files from code automatically.
FAQ
Can I switch i18n libraries later?
It's painful — translations need restructuring and component code changes. Choose carefully upfront. The concepts transfer but the APIs differ significantly.
Which supports right-to-left (RTL) languages?
All three support RTL content. RTL layout is handled by CSS (dir="rtl") regardless of i18n library choice.
How do I manage translations for a large team?
Use a Translation Management System (TMS): Crowdin, Phrase, Locize, or Transifex. All integrate with i18next. next-intl and Lingui work via file-based import/export with most TMS platforms.
Which is best for SEO?
All three support server-side rendering. For Next.js SEO, next-intl's middleware-based locale routing creates proper URL structures (/en/about, /fr/about) automatically.
The Verdict
- next-intl for Next.js projects. Best DX, smallest learning curve, native App Router support.
- react-i18next for framework-agnostic or complex i18n needs. Largest ecosystem and most flexible.
- Lingui for performance-critical apps with inline translation preferences. Smallest bundle, unique extraction workflow.
For new Next.js projects in 2026, next-intl is the obvious choice. For everything else, react-i18next remains the safe default.