Framework Guide

Internationalize Next.js with SiteLocaleAI – No Routing Changes

Published August 4, 2026

Internationalize Next.js with SiteLocaleAI – No Routing Changes

TL;DR: Add SiteLocaleAI’s drop‑in JavaScript library to your Next.js project, configure it with your LLM API key, and let the library handle on‑the‑fly translation, price localization, and SEO pre‑rendering—without rewriting your pages or app router.

1. Why SiteLocaleAI for Next.js?

Framework‑agnostic: Works whether you use the Pages Router, the new App Router, or a hybrid setup.
Self‑hosted: You keep control of your LLM provider (Claude, GPT‑4o‑mini, etc.) and data privacy.
Zero‑routing rebuild: The library intercepts requests on the client side and serves translated HTML, so your existing routes stay untouched.
SEO‑ready: A CLI can pre‑render static snapshots for each locale, letting search engines index fully translated pages.

Pro tip: Pair SiteLocaleAI with the built‑in price‑localization feature to boost conversion rates in each market.

2. Install the library

# Using npm or yarn – the package is a single JS file you can host yourself
npm i @sitelocaleai/nextjs
# or
yarn add @sitelocaleai/nextjs

If you prefer a CDN approach (no Node build step), you can also embed the script directly:

<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>

3. Add the provider to your app

Create a wrapper component that loads the SiteLocaleAI script and initializes it with your LLM API key.

// components/SiteLocaleProvider.tsx
import { useEffect } from 'react';

declare global {
  interface Window { SiteLocaleAI?: any; }
}

export default function SiteLocaleProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // Load the script if you used the CDN version
    if (!window.SiteLocaleAI) {
      const script = document.createElement('script');
      script.src = 'https://cdn.sitelocaleai.com/v1/site-locale.min.js';
      script.async = true;
      script.onload = initLocaleAI;
      document.head.appendChild(script);
    } else {
      initLocaleAI();
    }

    function initLocaleAI() {
      window.SiteLocaleAI?.init({
        apiKey: process.env.NEXT_PUBLIC_SITELocaleAI_API_KEY, // your LLM key
        defaultLocale: 'en',
        supportedLocales: ['en', 'es', 'fr', 'de', 'ja'],
        priceRounding: true, // enable psychological rounding
      });
    }
  }, []);

  return <>{children}</>;
}

Wrap your application in _app.tsx (Pages Router) or layout.tsx (App Router):

// pages/_app.tsx
import SiteLocaleProvider from '@/components/SiteLocaleProvider';
import '@/styles/globals.css';

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

4. Translate content on the fly

SiteLocaleAI automatically scans the DOM for translatable text nodes. For dynamic React components, you can use the helper t function:

import { useLocale } from '@sitelocaleai/nextjs';

export default function ProductCard({ name, price, currency }) {
  const { t, locale } = useLocale();

  // Price localization – the library will round to psychological values (e.g., $9.99 → $9.95)
  const localizedPrice = t.price(price, currency);

  return (
    <div className="card">
      <h2>{t(name)}</h2>
      <p>{t('Price')}: {localizedPrice}</p>
      <button>{t('Buy Now')}</button>
    </div>
  );
}

All static strings ('Price', 'Buy Now') are sent to your LLM for translation. The library caches results per locale, so subsequent renders are instant.

5. SEO‑friendly pre‑rendering with the CLI

Search engines need fully rendered HTML. SiteLocaleAI ships a CLI that crawls your Next.js build output, generates translated snapshots, and writes them to the public folder.

# Install the CLI globally (optional)
npm i -g @sitelocaleai/cli

# Run after `next build`
site-locale-cli pre-render \
  --output ./out \
  --locales en,es,fr,de,ja \
  --apiKey $SITELocaleAI_API_KEY

The CLI creates files like out/es/index.html and out/fr/product/123.html. When a crawler requests /es/, Next.js serves the pre‑rendered page, giving you the same SEO benefits as static site generation.

Note: The CLI works with both the output: 'export' static export and the output: 'standalone' serverless build.

6. WordPress & Shopify integration (bonus)

If your Next.js site pulls content from a headless WordPress or Shopify backend, you can still leverage SiteLocaleAI without Node on the CMS side. Just ensure the HTML delivered to the browser contains the raw text; SiteLocaleAI will translate it client‑side, and the CLI will handle the pre‑rendered version.

7. Testing your locales

# Start the dev server
npm run dev

# Visit http://localhost:3000?locale=es to see Spanish
# Or use the built‑in locale switcher component

You can also add a simple language selector:

import { useLocale } from '@sitelocaleai/nextjs';

export default function LocaleSwitcher() {
  const { setLocale, locale } = useLocale();

  return (
    <select value={locale} onChange={e => setLocale(e.target.value)}>
      <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>
  );
}

8. Deploy and monitor

Deploy your Next.js app as usual (Vercel, Netlify, Docker, etc.).
Monitor translation latency via the SiteLocaleAI dashboard – you’ll see per‑locale request counts and cache hit rates.
Update your LLM API key in the environment variable NEXT_PUBLIC_SITELocaleAI_API_KEY whenever you rotate credentials.

9. Next steps

Read the full SiteLocaleAI documentation for advanced configuration (custom prompts, fallback languages, etc.).
Explore the Next.js integration guide for deeper hooks and server‑side rendering options.

10. Try SiteLocaleAI today!

Ready to launch a multilingual Next.js site without the headache of rebuilding your router? Sign up for a free Indie plan and start translating in minutes. Your global audience is waiting!

Back to blog