Internationalize a Next.js App Without Rebuilding Routing

Published on SiteLocaleAI Blog

---

Why SiteLocaleAI?

• Drop‑in JavaScript – works with any framework (React, Vue, WordPress, Shopify, etc.).
• Self‑hosted – you keep control of your LLM API keys (Claude, GPT‑4o‑mini, etc.).
• Price localization – automatic psychological rounding per currency.
• SEO pre‑rendering CLI – search engines see fully translated, indexable pages.
• Zero routing changes – keep your existing pages/ or app/ structure.

If you already have a Next.js site and want to go global fast, SiteLocaleAI is the lightest way to add i18n without the overhead of next‑i18n or react‑i18next.

---

1. Install the Library

First, add the npm package that ships the browser bundle:

npm i @sitelocaleai/next

The package is only a thin wrapper around the core sitelocaleai library. It does not add any server‑side dependencies, so you can keep your existing next.config.js untouched.

---

2. Create a Tiny Wrapper Component

Create a new file components/LocaleProvider.jsx. This component loads the SiteLocaleAI script, injects your LLM API key, and watches for language changes.

import { useEffect } from 'react';
import Script from 'next/script';

const LocaleProvider = ({ children }) => {
  // You can store the API key in an environment variable
  const apiKey = process.env.NEXT_PUBLIC_SITELocaleAI_API_KEY;

  useEffect(() => {
    if (!window.SiteLocaleAI) return;

    // Initialise the library once the script is ready
    window.SiteLocaleAI.init({
      apiKey,
      // Default language – can be overridden per request
      defaultLang: 'en',
      // Enable price rounding (psychological pricing)
      priceRounding: true,
    });
  }, []);

  return (
    <>
      {/* Load the CDN bundle – you can also self‑host it */}
      <Script
        src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"
        strategy="beforeInteractive"
      />
      {children}
    </>
  );
};

export default LocaleProvider;

Wrap your whole app in pages/_app.jsx:

import LocaleProvider from '@/components/LocaleProvider';

export default function MyApp({ Component, pageProps }) {
  return (
    <LocaleProvider>
      <Component {...pageProps} />
    </LocaleProvider>
  );
}

---

3. Translate Content on the Fly

SiteLocaleAI works by scanning the DOM for elements with a data-locale attribute. Replace static text with a small wrapper that marks the text for translation.

import { useEffect } from 'react';

const Trans = ({ text, id }) => {
  useEffect(() => {
    // Register the string with the library (optional, for caching)
    if (window.SiteLocaleAI) {
      window.SiteLocaleAI.registerString(id, text);
    }
  }, [text, id]);

  return (
    <span data-locale id={id}>
      {text}
    </span>
  );
};

export default Trans;

Use it anywhere in your pages:

import Trans from '@/components/Trans';

export default function Home() {
  return (
    <main className="p-8">
      <h1>
        <Trans id="hero.title" text="Welcome to Our Store" />
      </h1>
      <p>
        <Trans id="hero.subtitle" text="Shop the best products at unbeatable prices" />
      </p>
    </main>
  );
}

When a visitor selects a language (we’ll add a simple selector next), SiteLocaleAI replaces the inner text of each data-locale element with the translated version fetched from your LLM.

---

4. Language Switcher

Add a tiny UI to let users pick a language. The library exposes setLanguage.

import { useState } from 'react';

export default function LanguageSwitcher() {
  const [lang, setLang] = useState('en');

  const changeLang = (e) => {
    const newLang = e.target.value;
    setLang(newLang);
    if (window.SiteLocaleAI) {
      window.SiteLocaleAI.setLanguage(newLang);
    }
  };

  return (
    <select value={lang} onChange={changeLang} className="border rounded p-1">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="fr">Français</option>
      <option value="de">Deutsch</option>
      <option value="ja">日本語</option>
    </select>
  );
}

Place <LanguageSwitcher /> in your header or footer. No routing changes are required – the page stays on the same URL while the text swaps out instantly.

---

5. Price Localization with Psychological Rounding

Wrap price numbers in a helper component that tells SiteLocaleAI to format and round them.

import { useEffect } from 'react';

const Price = ({ amount, currency }) => {
  const formatted = new Intl.NumberFormat(undefined, {
    style: 'currency',
    currency,
  }).format(amount);

  useEffect(() => {
    if (window.SiteLocaleAI) {
      window.SiteLocaleAI.registerPrice({ amount, currency, id: `price-${amount}` });
    }
  }, [amount, currency]);

  return (
    <span data-price id={`price-${amount}`}>
      {formatted}
    </span>
  );
};

export default Price;

Now use it in your product cards:

<Price amount={19.99} currency="USD" />

When the language switches to, say, Euro (EUR), SiteLocaleAI will:
1. Convert the amount using the latest exchange rate (you can supply a custom rate via the priceConversion option).
2. Apply psychological rounding (e.g., €19.99 → €19.95).
3. Render the localized price automatically.

---

6. SEO‑Friendly Pre‑Rendering (CLI)

Search engines need static HTML. SiteLocaleAI ships a CLI that pre‑renders each language version so crawlers see the translated content.

npx sitelocaleai prerender \
  --src ./out \
  --langs en,es,fr,de,ja \
  --output ./public/locale

• --src points to the static build folder (next export output).
• --langs lists the target languages.
• The CLI writes language‑specific HTML files (en/index.html, es/index.html, …) that you can serve via a simple rewrite rule in your hosting platform.

Add a script to package.json:

{
  "scripts": {
    "build": "next build && next export",
    "prerender": "npm run build && npx sitelocaleai prerender --src out --langs en,es,fr,de,ja --output public/locale"
  }
}

Deploy the public/locale folder to your CDN. Search engines will index each language path, giving you a huge boost in international SEO.

---

7. WordPress Integration (Bonus)

If you also run a WordPress blog, SiteLocaleAI offers a plugin that works without Node.js. Install it from the WordPress admin, paste the same API key, and the plugin will inject the same data-locale attributes into post content. This lets you share the same translation pipeline across your Next.js storefront and WordPress blog.

For detailed API reference, see the official docs: https://sitelocaleai.com/docs

---

8. Wrap‑Up

You now have:
- Instant client‑side translation without touching routes.
- Price localization that respects local pricing psychology.
- SEO‑ready static pages generated by the SiteLocaleAI CLI.
- A single source of truth for translations across multiple front‑ends (Next.js, WordPress, Shopify, etc.).

All of this runs on your own LLM API keys, keeping costs predictable and data private.

---

Ready to go global?

Try SiteLocaleAI today and see how fast you can launch a multilingual, price‑aware, SEO‑optimized site. Sign up for the $5 Indie plan or start a free trial at https://sitelocaleai.com.