Framework Guide

Internationalize Next.js with SiteLocaleAI – No Routing Changes

Published October 4, 2026

Internationalize Next.js with SiteLocaleAI – No Routing Changes

Internationalize a Next.js Site with SiteLocaleAI – No Routing Changes

TL;DR – Drop the SiteLocaleAI JavaScript library into any Next.js project, point it at your LLM API key, and instantly serve localized pages without touching the existing pages/ folder or dynamic routing.

1. Why SiteLocaleAI for Next.js?

  • Framework‑agnostic – Works with React, Vue, WordPress, Shopify, and especially Next.js.
  • Self‑hosted – You keep full control of the LLM (Claude, GPT‑4o‑mini, etc.) and never send user data to a third‑party service.
  • Zero‑routing overhead – The library intercepts requests at the client side and serves translations on‑the‑fly, so your pages/ structure stays exactly the same.
  • SEO‑ready – A CLI can pre‑render static HTML for each locale, letting Google index the translated content.

All of this comes with a tiny bundle size (≈ 12 KB gzipped) and a simple drop‑in script.

2. Install the Library

You can add SiteLocaleAI via npm or a plain <script> tag. For a Next.js project that already uses a bundler, npm is the most convenient:

npm i @sitelocaleai/js
# or with Yarn
yarn add @sitelocaleai/js

If you prefer not to touch the build pipeline, just drop the CDN script into _document.js:

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"
            defer
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Tip: The CDN version automatically registers a global SiteLocaleAI object.

3. Configure the Library

Create a small wrapper that initializes SiteLocaleAI with your LLM API key and the locales you want to support. Put this in lib/sitelocale.js:

// lib/sitelocale.js
import SiteLocaleAI from '@sitelocaleai/js';

const localeConfig = {
  defaultLocale: 'en',
  supportedLocales: ['en', 'es', 'fr', 'de', 'ja'],
  // Psychological rounding per currency – optional but recommended
  priceLocalization: {
    en: { currency: 'USD', rounding: 'nearest' },
    es: { currency: 'EUR', rounding: 'nearest' },
    fr: { currency: 'EUR', rounding: 'nearest' },
    de: { currency: 'EUR', rounding: 'nearest' },
    ja: { currency: 'JPY', rounding: 'nearest' },
  },
};

export function initSiteLocaleAI(apiKey) {
  SiteLocaleAI.init({
    apiKey,
    ...localeConfig,
    // Optional: custom prompt to guide the LLM
    promptTemplate: `Translate the following HTML into {{locale}} while preserving HTML tags.`,
  });
}

Now call this initializer in a top‑level component, such as pages/_app.js:

// pages/_app.js
import { useEffect } from 'react';
import { initSiteLocaleAI } from '@/lib/sitelocale';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Pull the key from an environment variable – never commit it!
    const apiKey = process.env.NEXT_PUBLIC_LOCALEAI_API_KEY;
    if (apiKey) initSiteLocaleAI(apiKey);
  }, []);

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

Security note: Store the key in a server‑only environment variable and expose it to the client via NEXT_PUBLIC_ only if you trust the LLM provider.

4. Automatic Page Translation

SiteLocaleAI works by scanning the DOM after the page loads and swapping text nodes with translated equivalents. No changes to your existing React components are required.

// pages/index.js
export default function Home() {
  return (
    <main>
      <h1>Welcome to Our Store</h1>
      <p>Find the best products at prices you love.</p>
      <p>Price: $49.99</p>
    </main>
  );
}

When a user visits https://example.com?locale=es, the library will:
1. Detect the locale query param (or fallback to the browser language).
2. Call your LLM API (Claude, GPT‑4o‑mini, etc.) with the HTML snippet.
3. Replace the text nodes with the Spanish translation.
4. Apply the currency rounding defined in priceLocalization (e.g., $49.99 → €42).

No extra routing logic is required – the same page component serves all locales.

5. SEO‑Friendly Pre‑Rendering

Search engines can’t execute JavaScript in all cases, so SiteLocaleAI ships a CLI that pre‑renders static HTML for each locale. Run it after your build step:

npx sitelocaleai pre-render \
  --output ./out \
  --locales en,es,fr,de,ja \
  --api-key $LOCALEAI_API_KEY

The CLI:
* Crawls your built Next.js site (.next or out folder).
* Sends each page’s HTML to the LLM for translation.
* Writes a locale‑specific HTML file (e.g., es/index.html).

You can then serve the pre‑rendered folder with any static host (Vercel, Netlify, Cloudflare Pages). Search engines will index the translated pages directly, boosting international SEO.

For more CLI options, see the official docs: https://sitelocaleai.com/docs/cli

6. Handling Dynamic Content & Price Localization

If you render prices server‑side, you can still let SiteLocaleAI adjust them client‑side using the priceLocalization map. For a product component:

// components/ProductPrice.js
export default function ProductPrice({ amount, currency }) {
  // The library will replace the inner text with the rounded, localized value.
  return <span className="price">{currency}{amount.toFixed(2)}</span>;
}

When the locale changes, SiteLocaleAI reads the mapping and rewrites the price automatically, applying the psychological rounding (e.g., $49.99 → $49.00).

7. WordPress Integration (Bonus)

If you also run a WordPress site, the same library can be loaded via the official plugin—no Node.js required. The plugin injects the same script and reads the same configuration from a JSON file you place in the WordPress root. This makes it trivial to keep the branding consistent across a headless CMS and a Next.js front‑end.

8. Testing Your Setup

  1. Local dev – Start the Next.js dev server and append ?locale=de to the URL. Verify that headings, paragraphs, and prices appear in German.
  2. Pre‑render check – After running the CLI, open out/es/index.html in a browser (no JavaScript). The page should already be in Spanish.
  3. Lighthouse – Run a Lighthouse audit on a pre‑rendered locale page. You should see a high SEO score because the content is fully crawlable.

9. Deploying

Because the library is self‑hosted, the only runtime dependency is the LLM API key. Deploy the same build artifact you use for the English version; the locale detection works entirely on the client or via the pre‑rendered HTML.

10. Next Steps

  • A/B test different translation prompts to improve tone.
  • Add locale‑specific SEO metadata (title, description) by using the SiteLocaleAI.setMeta() helper.
  • Combine with image localization – the library also supports generating locale‑specific alt‑text for images.

11. Ready to Go?

You now have a fully internationalized Next.js site without touching the router, plus SEO‑friendly static pages for every market you serve. All of this runs on your own LLM keys, keeping data private and costs predictable.

Try SiteLocaleAI today – sign up for the Indie plan at $5/month, get your API key, and start translating in minutes. Visit https://sitelocaleai.com/docs/getting-started for the full walkthrough.

Back to blog