How to Translate a React or Next.js App in 5 Minutes

Glotix Team·March 15, 2026·2 min read

The Traditional Way (and Why It's Painful)

The standard approach to translating a React app involves:

1. Installing react-i18next or next-intl
2. Creating JSON translation files for every language
3. Wrapping every text string in t('key') calls
4. Setting up a language context provider
5. Configuring routing for /en/, /fr/, /es/ paths
6. Maintaining all translation files as content changes

For a 50-page site with 3 languages, you're looking at hundreds of translation keys and ongoing maintenance.

The Glotix Way (5 Minutes)

Step 1: Add the Script Tag

In your index.html, _document.tsx, or layout file:

<script src="https://script.useglotix.com/?id=YOUR_PROJECT_ID" defer></script>

For Next.js App Router, add it to app/layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script src="https://script.useglotix.com/?id=YOUR_ID" defer />
      </head>
      <body>{children}</body>
    </html>
  )
}

Step 2: That's It

No, really. The Glotix SDK automatically:

Walks your DOM tree and finds all text nodes
Computes contextual hashes for each text occurrence
Detects the user's browser language
Translates everything via AI
Watches for React re-renders via MutationObserver
Shows a language switcher widget

How It Handles React Re-renders

React's virtual DOM reconciliation means real DOM nodes change frequently. Glotix handles this through:

MutationObserver — watches childList and characterData changes across the entire subtree. When React re-renders a component, the observer detects new text nodes and enqueues them for translation. WeakRef — text node references are stored as WeakRef, so garbage-collected nodes don't cause memory leaks. Hash stability — the FNV-1a hash includes the parent path (BODY>DIV>MAIN>H1). Even if React remounts a component, the new text node gets the same hash as the old one, so the cached translation applies instantly.

Client-Side Routing (SPA)

When using React Router, Next.js navigation, or any client-side routing, the URL changes but the page doesn't fully reload. Glotix's 2-second polling interval catches any content that the MutationObserver might miss during route transitions.

What About SSR/SSG?

For server-rendered Next.js pages, the initial HTML is served without translations. The Glotix SDK runs after hydration and translates the visible content. This means:

First paint shows the original language (fast LCP)
Translations apply within ~300ms of hydration
Subsequent navigations are instant (cached translations)

For fully server-side translation (SEO-critical pages), use Glotix's reverse proxy mode — it translates the HTML before it reaches the browser.

Try It

Visit useglotix.com, enter your React app's URL, and see it translated in seconds. No signup needed for the preview.