@universal-i18n/react

Before.tsx

            // Traditional i18n: a nightmare.
// You need to:
//  ❌ Create en.json, es.json, fr.json...
//  ❌ Wrap EVERY string in t()
//  ❌ Configure next-i18next / react-i18next
//  ❌ Maintain translations forever

import { useTranslation } from 'react-i18next';

function HomePage() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('hero.title')}</h1>
      <p>{t('hero.subtitle')}</p>
      <button>{t('hero.cta')}</button>
      // ... every. single. string.
    </div>
  );
}
          

            # One command. No setup needed.

npm install @universal-i18n/react


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Bundle size:        < 10KB  ✓
  Dependencies:       0       ✓
  Config files:       0       ✓
  JSON files needed:  0       ✓
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


# For Next.js — API key stays server-side:
# Set NEXT_PUBLIC_LINGODOTDEV_API_KEY in .env

# For Vite:
# Set VITE_LINGO_API_KEY in .env
          

            // Step 1: One API route (Next.js)
// app/api/universal-i18n/route.ts
import { createTranslationRoute }
  from '@universal-i18n/react/server';

export const POST = createTranslationRoute();


// Step 2: Wrap your layout. That's it.
// components/I18nWrapper.tsx
import { AutoTranslateProvider, ALL_LOCALES }
  from '@universal-i18n/react';

export function I18nWrapper({ children }) {
  return (
    <AutoTranslateProvider
      sourceLocale="en"
      availableLocales={ALL_LOCALES}
    >
      {children}  ← Everything translates
    </AutoTranslateProvider>
  );
}
          

            // Your original code. UNCHANGED.
// No t(), no translations, nothing.

function HomePage() {
  return (
    <div>
      <h2>Welcome to our platform</h2>
      <p>The best tool for your team.</p>
      <button>Get Started</button>
    </div>
  );
}

// 🌍 Click the 🌐 button in the preview →
// Watch it switch to Spanish, Hindi,
// Japanese... instantly. Zero changes
// to your component code.
          

localhost:3000

Translating to Spanish...

✦ MyApp

Features Pricing About

Welcome to our platform

The best tool for your team. Boost productivity today.

Fast & Reliable

Built for performance at any scale.

Secure by Default

Enterprise-grade security included.

🌐

One component.Infinite languages.

Welcome to our platform

One component.
Infinite languages.