Translate React and Next.js apps without i18n libraries

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/v1/widget.bundle.js"
          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/v1/widget.bundle.js" async></script>
</body>