Internationalize Your Next.js Site Without Rebuilding Routing

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

Why a Routing‑Free Approach?

Traditional i18n solutions for Next.js often require dynamic route segments ([lang]/...) or rewrites that duplicate pages, increase bundle size, and complicate deployment pipelines. If you already have a mature codebase, a routing overhaul can be risky and time‑consuming.

SiteLocaleAI solves this by providing a drop‑in JavaScript library that works framework‑agnostic—it simply reads the DOM, translates the text, and rewrites price values. Because the translation happens client‑side, you keep your original routes intact, and with the CLI pre‑rendering tool you can serve fully translated, indexable pages to search engines.

---

1. Install the Library

First, add the library to your project. It’s a single npm package, but you can also load it via a CDN if you prefer a zero‑install setup.

# Using npm
npm i @sitelocaleai/js

# Or Yarn
yarn add @sitelocaleai/js

If you’re on a static‑site host that doesn’t support Node.js (e.g., a WordPress site), just include the script tag:

<script src="https://cdn.sitelocaleai.com/js/sitelocaleai.min.js"></script>

---

2. Configure Your LLM API Keys

SiteLocaleAI is self‑hosted: you bring your own LLM provider (Claude, GPT‑4o‑mini, etc.). Store the key securely, e.g., in an environment variable.

// .env.local
NEXT_PUBLIC_LOCALEAI_API_KEY=sk-xxxxxx
NEXT_PUBLIC_LOCALEAI_ENDPOINT=https://api.openai.com/v1/chat/completions

---

3. Initialize the Library in _app.js

Create a small wrapper that loads the library once and sets the target language based on a query parameter or cookie.

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

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Grab language from URL, e.g., ?lang=fr
    const urlParams = new URLSearchParams(window.location.search);
    const lang = urlParams.get('lang') || 'en';

    // Initialise SiteLocaleAI
    SiteLocaleAI.init({
      apiKey: process.env.NEXT_PUBLIC_LOCALEAI_API_KEY,
      endpoint: process.env.NEXT_PUBLIC_LOCALEAI_ENDPOINT,
      targetLang: lang,
      // Enable price localization
      priceOptions: {
        enable: true,
        rounding: 'psychological', // 9.99 → 10.00, 4.95 → 5.00, etc.
      },
    });

    // Translate the page once it’s rendered
    SiteLocaleAI.translatePage();
  }, []);

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

export default MyApp;

Tip: The library automatically scans for elements with data-price attributes and rewrites them with localized values.

---

4. Mark Up Prices for Localization

Add a tiny data attribute to any price you want to localize. The library will replace the inner text with a correctly rounded amount in the user’s currency.

<p>Standard plan: <span data-price="29.99" data-currency="USD">$29.99</span></p>

When the user switches to EUR, the same element becomes €27.00 (rounded psychologically).

---

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines can’t execute client‑side JavaScript reliably. SiteLocaleAI ships a CLI that pre‑renders translated pages as static HTML files, which you can serve directly from your CDN.

# Install the CLI globally (or as a dev dependency)
npm i -g @sitelocaleai/cli

# Generate French and German versions of every route
sitelocaleai prerender --langs fr,de --output ./out

The CLI:
1. Crawls your site (starting from next start).
2. Requests each page with ?lang=xx.
3. Runs the same translation pipeline server‑side.
4. Writes the fully translated HTML to ./out/fr/... and ./out/de/....

You can now configure Next.js to serve these static files via rewrites:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      { source: '/fr/:path*', destination: '/out/fr/:path*' },
      { source: '/de/:path*', destination: '/out/de/:path*' },
    ];
  },
};

Search engines will index the French and German URLs, while users still navigate the original English routes.

---

6. Keep Your Existing Routing Intact

Because the translation is driven by a query string (?lang=xx) and the CLI produces separate static folders, you never need to change your pages/ directory or add [lang] folders. Your original pages/index.js, pages/about.js, etc., stay exactly the same.

---

7. Internal Links to Documentation

For deeper configuration options, see the official docs:
- Quick‑Start Guide
- SEO Pre‑Render CLI

---

8. Testing Your Implementation

1. Local dev – Run npm run dev and append ?lang=es to any page. You should see the text and prices instantly translated.
2. Static build – Run npm run build && npm start, then execute the CLI to generate the pre‑rendered files. Verify the output HTML contains the translated strings.
3. Performance – Because the library runs in parallel on the client, the perceived latency is under 200 ms for typical pages (see SiteLocaleAI benchmark docs).

---

9. Benefits Recap

Feature	Why It Matters
No routing changes	Keeps your Git history clean and avoids breaking existing links.
Self‑hosted LLM	You control cost, privacy, and model choice.
Price localization	Increases conversion by showing familiar, psychologically rounded prices.
SEO pre‑rendering	Search engines index fully translated pages, boosting organic traffic.
Framework‑agnostic	Works with React, Vue, WordPress, Shopify, or any static site.

---

10. Ready to Go Global?

Internationalizing a Next.js app doesn’t have to be a massive refactor. With SiteLocaleAI, you get instant multilingual support, price rounding, and SEO‑ready static pages—all without touching your router.

Try SiteLocaleAI today and see how quickly you can expand into new markets while keeping your codebase lean. Visit sitelocaleai.com to start your free trial.