Framework Guide

Add Internationalization to Next.js Without Rebuilding Routes

Published August 21, 2026

Internationalize a Next.js App Without Rebuilding Routes

Published on SiteLocaleAI Blog ---

Internationalization (i18n) is a must‑have for any site that wants to attract global traffic. Traditional Next.js i18n requires you to define locale‑specific routes or use a third‑party router, which can become a maintenance nightmare. SiteLocaleAI solves this problem with a drop‑in JavaScript library that works on any framework, including Next.js, and lets you translate content, localize prices, and pre‑render SEO‑friendly pages—all without touching your routing configuration.

In this tutorial we’ll:
1. Install the SiteLocaleAI library.
2. Configure it to use your own LLM API key.
3. Wrap your pages with a translation provider.
4. Enable price localization with psychological rounding.
5. Use the CLI to generate pre‑rendered HTML for search engines.

TL;DR – You’ll get a fully multilingual Next.js site in under 30 minutes, and your existing routes stay exactly the same.

1. Install the Library

SiteLocaleAI ships as an npm package that can be imported anywhere. Because it’s framework‑agnostic, you only need to add it to your project’s dependencies.

npm install @sitelocaleai/core
# or yarn
yarn add @sitelocaleai/core

If you prefer a CDN, you can also load the UMD bundle directly in _document.js:

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

2. Set Up Your LLM Provider

SiteLocaleAI does not host any model; you provide the API key for the LLM you trust (Claude, GPT‑4o‑mini, etc.). Create a .env.local file (or use your secret manager) and add:

NEXT_PUBLIC_SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_SITELOCALEAI_ENDPOINT=https://api.openai.com/v1/chat/completions

The library reads these variables automatically. If you need a custom endpoint, set NEXT_PUBLIC_SITELOCALEAI_ENDPOINT accordingly.

3. Wrap Your Application with the Provider

In a Next.js app the best place to inject global logic is pages/_app.js. Import the provider and configure it with the languages you support.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { SiteLocaleProvider } from '@sitelocaleai/core';

const supportedLocales = ['en', 'es', 'fr', 'de', 'ja'];

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SiteLocaleProvider
      defaultLocale="en"
      locales={supportedLocales}
      apiKey={process.env.NEXT_PUBLIC_SITELOCALEAI_API_KEY}
      endpoint={process.env.NEXT_PUBLIC_SITELOCALEAI_ENDPOINT}
    >
      <Component {...pageProps} />
    </SiteLocaleProvider>
  );
}

All child components now have access to the useLocale hook, which gives you:
- locale – current language code.
- setLocale – switch language on the fly.
- t – a function that translates any string using the configured LLM.

4. Translate Content on the Fly

Replace static text with the t helper. Because the translation happens client‑side, you can keep your original JSX untouched.

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

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

  return (
    <section className="hero">
      <h1>{t('Welcome to our store')}</h1>
      <p>{t('Find the best products at unbeatable prices')}</p>
      <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>
    </section>
  );
}

The first time a user selects a language, SiteLocaleAI sends the original string to the LLM, caches the result, and re‑renders instantly. Subsequent visits hit the cache, making the experience blazingly fast.

5. Localize Prices with Psychological Rounding

SiteLocaleAI includes a utility that converts a raw price into a locale‑aware, psychologically rounded amount (e.g., $9.99 → €8.99). Import formatPrice and pass the currency code.

import { formatPrice } from '@sitelocaleai/core';

function ProductCard({ priceUSD }: { priceUSD: number }) {
  const { locale } = useLocale();
  const localized = formatPrice(priceUSD, locale);

  return (
    <div className="product-card">
      <span className="price">{localized}</span>
    </div>
  );
}

The function respects regional rounding rules (e.g., ¥1000 in Japan, £9.99 in the UK) and automatically adds the correct currency symbol.

6. SEO‑Friendly Pre‑Rendering with the CLI

Search engines still prefer static HTML. SiteLocaleAI ships a CLI that crawls your routes, renders each page in every supported locale, and writes the output to the out/ folder for Next.js static export.

npx sitelocaleai prerender \
  --output ./out \
  --locales en,es,fr,de,ja \
  --base-url https://www.yourdomain.com

Add this command to your CI pipeline (GitHub Actions, Vercel, Netlify, etc.) so that every deployment ships a fully translated HTML snapshot. Search bots will index the localized pages directly, boosting international SEO without any extra routing logic.

7. WordPress & Shopify? No Node Required

If you also run a WordPress site, the same library can be loaded via the official plugin—no Node.js needed. The plugin injects the same translation script and reads your LLM keys from the admin panel. This unified approach lets you keep the same translation quality across all your digital properties.

8. Quick Recap

Step	What you did
1️⃣	Installed `@sitelocaleai/core`
2️⃣	Added LLM API key to environment
3️⃣	Wrapped the app with `<SiteLocaleProvider>`
4️⃣	Replaced static strings with `t()`
5️⃣	Used `formatPrice` for localized pricing
6️⃣	Ran `sitelocaleai prerender` for SEO HTML

All of this required zero changes to pages/[...slug].js or any custom routing files. Your URLs stay exactly the same, but visitors now see content in their language and currency.

9. Next Steps

A/B test different translation prompts to improve tone.
Add fallback languages for markets with low LLM confidence.
Monitor cache hit rates via the dashboard in the SiteLocaleAI console.

Ready to go global? Try SiteLocaleAI for free on the Indie plan ($5/month) and see how fast you can launch a multilingual site.

📣 Call to Action

🚀 Start translating today – head over to the SiteLocaleAI docs for deeper integration tips, then sign up for a plan that fits your needs. International traffic is just a few lines of code away!

Back to blog