Add Internationalization to Next.js Without Rebuilding Routes

TL;DR – Drop in SiteLocaleAI’s self‑hosted JS library, configure a tiny wrapper, and let the library translate and localize content at runtime. No changes to pages/ or app/ routing, no extra build steps, and SEO‑friendly pre‑rendered pages via the CLI.

---

1. Why SiteLocaleAI for Next.js?

• Framework‑agnostic – Works with React, Vue, WordPress, Shopify, or plain HTML.
• Self‑hosted – You provide your own LLM API key (Claude, GPT‑4o‑mini, etc.), keeping data private and costs predictable.
• Price rounding – Automatic psychological rounding per currency (e.g., $9.99 → $10).
• SEO pre‑rendering – The CLI crawls your routes and writes fully translated HTML files that search engines can index.

All of this can be added to an existing Next.js project without touching the routing layer.

---

2. Prerequisites

Requirement	Details
Node.js >= 18	LTS version recommended
Next.js 13+ (App Router optional)	Works with both pages and app directories
LLM API key	Claude, GPT‑4o‑mini, or any OpenAI‑compatible endpoint
Git (optional)	For version control

---

3. Install the SiteLocaleAI library

# Using npm
npm i @sitelocaleai/js

# Or Yarn
yarn add @sitelocaleai/js

The package is just a plain JavaScript bundle, so it works whether you use ES modules or CommonJS.

---

4. Create a tiny wrapper component

Create components/LocaleProvider.jsx (or .tsx if you prefer TypeScript). This component loads the library, injects the LLM key, and provides a React context for language switching.

import { createContext, useContext, useEffect, useState } from 'react';
import { initSiteLocale, translatePage, setCurrency } from '@sitelocaleai/js';

// 1️⃣ Initialise the library once
const siteLocale = initSiteLocale({
  apiKey: process.env.NEXT_PUBLIC_SITELOCALEAI_API_KEY, // keep it in .env.local
  defaultLang: 'en',
  supportedLangs: ['en', 'es', 'fr', 'de', 'ja'],
  priceRounding: true,
});

const LocaleContext = createContext({
  lang: 'en',
  setLang: () => {},
});

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

export default function LocaleProvider({ children }) {
  const [lang, setLang] = useState('en');

  // 2️⃣ Translate the page whenever the language changes
  useEffect(() => {
    translatePage(siteLocale, lang).catch(console.error);
  }, [lang]);

  // 3️⃣ Optional: adjust currency based on language
  useEffect(() => {
    const currencyMap = {
      en: 'USD',
      es: 'EUR',
      fr: 'EUR',
      de: 'EUR',
      ja: 'JPY',
    };
    setCurrency(siteLocale, currencyMap[lang] || 'USD');
  }, [lang]);

  return (
    <LocaleContext.Provider value={{ lang, setLang }}>
      {children}
    </LocaleContext.Provider>
  );
}

Tip: Keep the API key in a public environment variable (NEXT_PUBLIC_…) only if you’re comfortable exposing it to the client. For stricter security, proxy the calls through a serverless function that injects the key.

---

5. Wrap your application

Edit pages/_app.jsx (or app/layout.jsx if you use the App Router) to include the provider.

import LocaleProvider from '@/components/LocaleProvider';

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

No routing files are touched – the same URLs (/, /about, /products) stay intact.

---

6. Add a language switcher UI

import { useLocale } from '@/components/LocaleProvider';

export default function LanguageSwitcher() {
  const { lang, setLang } = useLocale();

  const options = [
    { code: 'en', label: 'English' },
    { code: 'es', label: 'Español' },
    { code: 'fr', label: 'Français' },
    { code: 'de', label: 'Deutsch' },
    { code: 'ja', label: '日本語' },
  ];

  return (
    <select
      value={lang}
      onChange={(e) => setLang(e.target.value)}
      className="p-2 border rounded"
    >
      {options.map((opt) => (
        <option key={opt.code} value={opt.code}>
          {opt.label}
        </option>
      ))}
    </select>
  );
}

Place <LanguageSwitcher /> anywhere in your layout (header, footer, etc.). The library will replace text nodes in place, and prices will be rounded according to the selected currency.

---

7. SEO‑friendly pre‑rendering with the CLI

SiteLocaleAI ships a CLI that crawls your Next.js build output and writes static HTML for every language. Run it after next build.

# Build the app first
npm run build

# Then generate translated static files
npx sitelocaleai-cli \
  --output ./out \
  --langs en,es,fr,de,ja \
  --api-key $SITELOCALEAI_API_KEY

The CLI creates a folder structure like:

/out/
  en/
    index.html
    about.html
  es/
    index.html
    about.html
  ...

Deploy the out folder to any static host (Vercel, Netlify, Cloudflare Pages). Search engines will see fully translated HTML, giving you the SEO boost of a traditional i18n implementation without the runtime translation penalty.

For more details, see the official docs: https://sitelocaleai.com/docs/seo.

---

8. Optional: WordPress plugin for hybrid sites

If part of your site lives on WordPress, you can install the SiteLocaleAI WordPress plugin (no Node.js required). It injects the same client‑side script, so the same language switcher works across both platforms. This is handy for hybrid setups where you serve a Next.js storefront alongside a WordPress blog.

---

9. Deploy and verify

1. Local test – Run npm run dev, switch languages, and confirm that text and prices update instantly.
2. Static preview – After running the CLI, serve the out folder with npx serve out and crawl with curl to see the translated HTML.
3. Production – Deploy the static folder to your CDN. Use Google Search Console’s URL Inspection tool to verify that each language version is indexed.

---

10. Wrap‑up

You now have a fully internationalized Next.js site that:
- Works with any LLM you trust.
- Localizes prices with psychological rounding.
- Serves SEO‑ready static pages for every language.
- Requires zero changes to your routing.

All of this is powered by SiteLocaleAI’s drop‑in JavaScript library, keeping your codebase lean and your performance high.

---

Ready to go global? Try SiteLocaleAI today and see how fast you can launch a multilingual site without a rewrite. Visit https://sitelocaleai.com to start your free Indie plan or jump straight to the Enterprise tier for massive traffic.