Translate React and Next.js apps without i18n libraries

Setting up react-i18next, next-intl, or Lingui means wrapping every string, restructuring routes, and maintaining translation files. Lingvit skips all of that — one script, no component changes, no build-time strings.

When Lingvit is the right choice for React

✓You have an existing app and don't want to refactor every component
✓You need translations live fast — days, not weeks
✓Non-technical team members need to review and edit translations
✓Your copy changes often and you don't want a redeployment cycle per translation update

If you need deeply integrated RTL layouts, currency/number locale formatting, or type-safe translation keys at compile time — a full i18n library is still the right tool. Lingvit is for getting multilingual fast.

Next.js App Router

Use Next.js's built-in Script component withstrategy="afterInteractive"to load Lingvit after hydration:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.lingvit.com/widget.bundle.js?v=1"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Lingvit's MutationObserver detects content rendered after hydration, so dynamically loaded components, route transitions, and lazy-loaded sections are all translated.

Vite / Create React App

For Vite or CRA projects, add the script tag to your root index.html:

<!-- index.html (Vite / CRA) -->
<body>
  <div id="root"></div>
  <script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>
</body>

Related guides

Go multilingual without rewriting your app

One script, any React app, with simple monthly plans.

Get started See the 3-step setup