← Back to articles

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

Featurenext-intlreact-i18nextLingui
FrameworkNext.js onlyAny React (+ Next.js)Any React (+ Next.js)
App RouterFirst-classGood (via next-i18next)Good
Server ComponentsNative supportRequires setupGood
Bundle size~14KB~25KB (with i18next)~5KB
Message formatICUCustom + ICU pluginICU
Type safetyExcellentGood (with plugin)Excellent
ExtractionManualManual (+ tools)Automatic (CLI)
PluralsICU standardBuilt-inICU standard
CommunityGrowing fastLargestModerate
Learning curveLow (Next.js devs)ModerateModerate

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.

Get AI tool guides in your inbox

Weekly deep-dives on the best AI coding tools, automation platforms, and productivity software.