Internationalize Your Next.js Site Without Rebuilding Routes

“Add multilingual support to a Next.js app without touching the router—fast, cheap, and SEO‑friendly.”

When you want to go global, the first thing that comes to mind is a massive routing overhaul: separate /en, /fr, /de folders, locale‑aware getStaticPaths, and a ton of boilerplate. SiteLocaleAI flips that model on its head. By injecting a tiny, framework‑agnostic JavaScript library into your pages, you can translate any text node, localize prices, and even pre‑render fully translated pages for search engines—all while keeping your original routing untouched.

---

Why Choose SiteLocaleAI for Next.js?

Feature	Benefit
Drop‑in JS library	No need to refactor your existing pages or add a new i18n framework.
Self‑hosted	You bring your own LLM API keys (Claude, GPT‑4o‑mini, etc.)—no third‑party data leakage.
Price localization	Automatic psychological rounding per currency (e.g., $9.99 → €8.99).
SEO CLI	Generates static HTML snapshots for each locale, so Google indexes the translated content.
Framework‑agnostic	Works with React, Vue, WordPress, Shopify, or plain HTML—perfect for hybrid Next.js apps.

---

1. Install the Library

First, add the npm package (or pull the CDN script) to your Next.js project:

npm i @sitelocaleai/js
# or, if you prefer a CDN
# <script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>

Tip: The library is only ~30 KB gzipped and runs in the browser, so it doesn’t affect your bundle size much.

---

2. Initialize SiteLocaleAI in _app.js

Create a tiny wrapper that reads the user’s language preference (via Accept‑Language header, a cookie, or a URL query) and boots the translator.

// pages/_app.tsx
import { useEffect } from "react";
import SiteLocaleAI from "@sitelocaleai/js";

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Detect locale – fallback to 'en'
    const locale = navigator.language?.split("-")[0] || "en";

    SiteLocaleAI.init({
      apiKey: process.env.NEXT_PUBLIC_LLM_API_KEY,
      targetLocale: locale,
      // Optional: price rounding rules per currency
      priceConfig: {
        USD: { round: 0.99 },
        EUR: { round: 0.99 },
        GBP: { round: 0.99 },
      },
    });
  }, []);

  return <Component {...pageProps} />;
}

The init call does not modify your router. It simply registers a DOM observer that swaps text nodes with LLM‑generated translations on the fly.

---

3. Translate Content on the Fly

All you need is to mark elements that should be translated. The library uses a data-locale attribute, but you can also rely on the default behavior that translates any visible text.

// pages/index.tsx
export default function Home() {
  return (
    <main>
      <h1 data-locale="welcome">Welcome to Our Store</h1>
      <p data-locale="intro">
        Discover the best products at unbeatable prices.
      </p>
      <p>
        <span data-locale="price" data-currency="USD">$19.99</span>
      </p>
    </main>
  );
}

When the page loads, SiteLocaleAI replaces the inner text of each marked element with the appropriate translation, and it rounds the price according to the locale‑specific rule.

---

4. SEO‑Friendly Pre‑Rendering

Search engines still love static HTML. SiteLocaleAI ships a CLI that crawls your site, renders each locale, and writes the output to a dist/ folder. Run it once after a build:

npx sitelocaleai prerender \
  --output ./out \
  --locales en,fr,de,es \
  --base-url https://yourdomain.com

The CLI spins up a headless Chromium instance, injects the library, waits for translations to settle, then saves the final HTML. You can then serve these files via Next.js’s export mode or a static host (Netlify, Vercel, etc.).

Result: Google indexes /fr and /de pages as if they were built natively, giving you a huge boost in international SEO.

---

5. WordPress & Shopify Integration (Optional)

If your Next.js app pulls content from a headless CMS like WordPress, you can still use the same approach. The library works on any HTML output, so you only need to add the script tag to the CMS template. No Node.js is required on the CMS side.

---

6. Best Practices for SEO

1. Canonical Tags – Keep a canonical URL per page (e.g., https://example.com/product/123). The CLI automatically adds <link rel="canonical" href="..." /> for each locale.
2. Hreflang Headers – The CLI also injects <link rel="alternate" hreflang="fr" href="https://example.com/fr/product/123" /> tags.
3. Sitemap Generation – After prerendering, run a sitemap generator that includes every locale URL.
4. Performance – Enable lazy: true in SiteLocaleAI.init if you want translations to load after the initial paint for ultra‑fast LCP.

---

7. Full Example Repository

You can clone a ready‑made starter that demonstrates everything above:

git clone https://github.com/sitelocaleai/nextjs-i18n-demo.git
cd nextjs-i18n-demo
npm install
npm run dev

The repo includes:
- _app.tsx with the init script.
- A prerender npm script that calls the CLI.
- A sitemap.xml generator that respects locales.

For deeper details, see the official docs:
- https://sitelocaleai.com/docs
- https://sitelocaleai.com/docs/nextjs

---

8. Pricing Snapshot

Plan	Price	Ideal For
Indie	$5/mo	Solo developers, hobby projects
Starter	$49/mo	Small agencies, early‑stage SaaS
Growth	$99/mo	Mid‑size businesses, multiple locales
Enterprise	$249/mo	High‑traffic sites, custom SLAs

All plans give you unlimited API calls (you pay for your LLM usage) and access to the SEO CLI.

---

9. Wrap‑Up

Internationalizing a Next.js app no longer means a massive routing refactor. With SiteLocaleAI you get:
- Zero routing changes – keep your existing URLs.
- Instant translations – powered by your own LLM keys.
- Price localization – psychological rounding per currency.
- SEO‑ready static pages – crawlers see fully translated HTML.

Ready to go global? Try SiteLocaleAI today and see how quickly you can turn a single‑language Next.js site into a multilingual powerhouse.