Framework Guide

Add Internationalization to Next.js Without Rebuilding Routes

Published July 16, 2026

Add Internationalization to Next.js Without Rebuilding Routes

Add Internationalization to Next.js Without Rebuilding Routes

Internationalizing a Next.js application often feels like a massive overhaul: new routes, locale‑aware navigation, and a lot of boilerplate. SiteLocaleAI flips the script by letting you inject multilingual capabilities directly into the client side with a drop‑in JavaScript library. The result? No changes to your existing routing, no extra server‑side logic, and a SEO‑friendly pre‑render step that works with any framework you love.

Why Choose SiteLocaleAI for Next.js?

  • Framework‑agnostic – Works with React, Vue, WordPress, Shopify, or plain HTML.
  • Self‑hosted – You bring your own LLM API key (Claude, GPT‑4o‑mini, etc.), keeping data private and costs predictable.
  • Price localization – Automatic psychological rounding per currency, e.g., $9.99 → €8.99.
  • SEO pre‑rendering CLI – Generates static HTML for each locale, so Google indexes the translated pages.
  • Zero‑node WordPress plugin – For non‑React sites you can still benefit from the same library.

1. Install the Library

First, add the npm package to your project. The library is tiny (≈ 5 KB gzipped) and has no peer dependencies.

npm i @sitelocaleai/react

If you prefer a CDN, you can also load it directly in _document.js:

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

2. Initialize SiteLocaleAI in a Global Provider

Create a context that loads the LLM‑powered translations once and makes them available throughout the app.

// lib/LocaleProvider.tsx
import { createContext, useContext, useEffect, useState } from 'react';
import { SiteLocaleAI } from '@sitelocaleai/react';

const LocaleContext = createContext<{ t: (key: string) => string }>({ t: (k) => k });

export const LocaleProvider = ({ children, locale = 'en' }) => {
  const [translations, setTranslations] = useState<Record<string, string>>({});

  useEffect(() => {
    // Initialise the library with your LLM API key (stored in env)
    const ai = new SiteLocaleAI({
      apiKey: process.env.NEXT_PUBLIC_SITELocaleAI_API_KEY,
      model: 'gpt-4o-mini',
      targetLocale: locale,
    });

    // Load a JSON bundle of source strings (you can generate this with i18next‑scan)
    fetch('/locales/en.json')
      .then((r) => r.json())
      .then(async (source) => {
        const translated = await ai.translateBundle(source);
        setTranslations(translated);
      });
  }, [locale]);

  const t = (key: string) => translations[key] || key;

  return <LocaleContext.Provider value={{ t }}>{children}</LocaleContext.Provider>;
};

export const useLocale = () => useContext(LocaleContext);

Wrap your app in _app.tsx:

// pages/_app.tsx
import { LocaleProvider } from '../lib/LocaleProvider';

function MyApp({ Component, pageProps }) {
  const locale = pageProps.locale ?? 'en';
  return (
    <LocaleProvider locale={locale}>
      <Component {...pageProps} />
    </LocaleProvider>
  );
}

export default MyApp;

3. Use the t Helper in Your Components

Now you can replace static strings with the t function. No routing changes are required.

import { useLocale } from '../lib/LocaleProvider';

export default function Hero() {
  const { t } = useLocale();
  return (
    <section className="hero">
      <h1>{t('welcome_title')}</h1>
      <p>{t('welcome_subtitle')}</p>
      <button>{t('cta_button')}</button>
    </section>
  );
}

Your en.json might contain:

{
  "welcome_title": "Welcome to Our Store",
  "welcome_subtitle": "Find the best products at the right price.",
  "cta_button": "Shop Now"
}

When the locale is set to fr, the library will replace those keys with French equivalents on the fly.

4. Localize Prices with Psychological Rounding

SiteLocaleAI also offers a helper to format and round prices per currency. Import the localizePrice function:

import { localizePrice } from '@sitelocaleai/react';

const priceUSD = 9.99;
const priceEUR = localizePrice(priceUSD, { currency: 'EUR', locale: 'fr' }); // → "8,99 €"

The function applies market‑specific rounding (e.g., $9.99 → €8.99) and adds the appropriate symbol.

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines need fully rendered HTML to index translated pages. SiteLocaleAI’s CLI crawls your site, renders each locale, and writes static files to the out/ folder.

npx sitelocaleai pre-render \
  --output ./out \
  --locales en,fr,de,es \
  --base-url https://example.com

Add the command to your package.json scripts:

{
  "scripts": {
    "build": "next build && next export",
    "preRender": "npx sitelocaleai pre-render --output out --locales en,fr,de,es --base-url https://example.com"
  }
}

Deploy the out/ folder to any static host (Vercel, Netlify, Cloudflare Pages). Each locale gets its own folder (/en, /fr, …) and the URLs stay the same as your original routes, preserving backlinks and internal navigation.

6. Internal Documentation Links

For deeper configuration options, see the official docs:
- [Next.js Integration]https://sitelocaleai.com/docs/nextjs)
- SEO Pre‑Rendering Guide

7. Wrap‑Up & CTA

By leveraging SiteLocaleAI’s drop‑in library, you can turn any existing Next.js site into a multilingual powerhouse without touching the routing layer. The self‑hosted model keeps your data secure, price localization drives conversions, and the SEO CLI ensures every language version gets indexed.

Ready to go global in minutes? Try SiteLocaleAI today and see how easy internationalization can be.

Back to blog