Internationalizing a Next.js App Without Rebuilding Routes

“Add languages, localize prices, and keep SEO happy—without touching the router.

Internationalization (i18n) is a must‑have for any site that wants to reach a global audience. In a typical Next.js project you would:

1. Add locale folders (/pages/en, /pages/fr …).
2. Update next.config.js with i18n settings.
3. Rewrite or duplicate routes for each language.
4. Re‑run the build each time you add a new locale.

That workflow works, but it’s heavyweight, especially for fast‑moving startups that need to roll out new markets on the fly. SiteLocaleAI flips the script: a drop‑in JavaScript library that runs on the client, uses your own LLM API keys, and can be pre‑rendered for search engines via a simple CLI.

---

Why SiteLocaleAI Beats the Conventional Next.js i18n Approach

Conventional Next.js i18n	SiteLocaleAI (Drop‑in JS)
Routing changes required – each locale is a separate route.	No routing changes – the same URL serves all languages; the library swaps content on the fly.
Build‑time translation – you must generate static files for each language before deployment.	Runtime translation – the LLM translates on request, using the API key you provide.
Static price handling – you need separate price data per locale.	Dynamic price localization – built‑in psychological rounding per currency, no extra data layer.
SEO limitations – only the default language is indexed unless you generate static pages for each locale.	SEO pre‑rendering CLI – generates fully translated HTML snapshots that crawlers can index.
Framework lock‑in – works best with Next.js routing APIs.	Framework‑agnostic – works with React, Vue, WordPress, Shopify, or any static site.

In short, SiteLocaleAI lets you add a new language in minutes, not days, and you keep a single source of truth for your UI.

---

Getting Started: Drop‑in Library Installation

# Install the npm package (optional – you can also load via CDN)
npm i site-locale-ai

Then add the script to your _app.js (or any top‑level component):

import { SiteLocaleAI } from 'site-locale-ai';

function MyApp({ Component, pageProps }) {
  return (
    <SiteLocaleAI
      apiKey={process.env.NEXT_PUBLIC_LLM_API_KEY}
      defaultLang="en"
      supportedLangs={['en', 'es', 'de', 'ja']}
      priceRounding="psychological"
    >
      <Component {...pageProps} />
    </SiteLocaleAI>
  );
}

export default MyApp;

That’s it—no next.config.js changes, no new folders, no rebuilds.

---

How the Library Works Under the Hood

1. Detect language – reads the Accept‑Language header, a query param (?lang=es), or a cookie.
2. Fetch translations – calls your chosen LLM (Claude, GPT‑4o‑mini, etc.) via the provided API key. The request includes the raw HTML snippet and a prompt that asks for a faithful translation while preserving markup.
3. Replace text nodes – the library swaps the original text with the translated version while keeping React’s virtual DOM intact.
4. Localize prices – if a number is detected, SiteLocaleAI applies currency‑specific rounding (e.g., €9.99 → €9.95) and formats it according to locale conventions.

Because the translation happens after the page is rendered, the user sees the content instantly, and the original HTML remains crawlable for bots that don’t execute JavaScript.

---

SEO‑Friendly Pre‑Rendering with the CLI

Search engines like Google can execute JavaScript, but they still give higher weight to static HTML. SiteLocaleAI ships a CLI that pre‑renders each locale and writes the output to a dist/ folder.

n Run the pre‑render for all supported languages
npx site-locale-ai prerender --langs en,es,de,ja

The CLI:

• Starts a headless Chromium instance.
• Loads your Next.js page.
• Waits for SiteLocaleAI to finish translating.
• Saves the final HTML as index.en.html, index.es.html, etc.

You can then serve these static files directly from a CDN or configure your server to serve the appropriate file based on the Accept‑Language header. This gives you full indexing for each language without any extra routing logic.

---

WordPress & Shopify: No Node.js Required

If you’re not on a Node stack, SiteLocaleAI still works. The WordPress plugin injects the same script via a shortcode, and the Shopify app adds it to the theme’s layout.liquid. Because the library is self‑hosted, you keep your LLM API keys private and never expose them to the public.

---

Real‑World Example: Translating a Product Page

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product({ product }) {
  const { locale } = useRouter(); // optional – you can still read the locale if you need it
  return (
    <section>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
      <p className="price">{product.price} USD</p>
    </section>
  );
}

export async function getStaticProps({ params }) {
  // Fetch product data from your DB – no translation needed here
  const product = await fetchProduct(params.id);
  return { props: { product } };
}

When the page loads, SiteLocaleAI will:

• Translate product.title and product.description into the visitor’s language.
• Convert product.price from USD to the local currency and apply psychological rounding (e.g., €9.95).

All of this happens without changing the route (/product/123) or rebuilding the site.

---

When to Choose SiteLocaleAI Over Built‑In Next.js i18n

Situation	Next.js i18n	SiteLocaleAI
Rapid market expansion – new language every week	Requires new locale folders & rebuilds	Add language in the supportedLangs array, no rebuild
Dynamic pricing – need currency‑specific rounding	Custom code per locale	Built‑in rounding engine
SEO‑critical – want static HTML for each language	Must generate static pages manually	CLI does it automatically
Non‑Node environments – WordPress, Shopify	Not applicable	Works via plugin or script tag
Control over LLM provider	Fixed to next-intl or similar	Use any API key (Claude, GPT‑4o‑mini, etc.)

If any of the above resonates, SiteLocaleAI is the clear winner.

---

Pricing Overview

Plan	Price	Ideal For
Indie	$5/mo	Solo developers, hobby projects
Starter	$49/mo	Small businesses, 1‑3 languages
Growth	$99/mo	Mid‑size SaaS, 5‑10 languages, SEO pre‑rendering
Enterprise	$249/mo	High‑traffic sites, custom SLAs, dedicated support

All plans include unlimited API calls (you pay the LLM provider separately) and full access to the CLI and WordPress plugin.

---

Try SiteLocaleAI Today

Ready to internationalize your Next.js app without the routing nightmare? [Sign up for a free Indie plan] and get instant access to the library, CLI, and documentation.

Need help getting started? Check out the full guide at https://sitelocaleai.com/docs.

---

Happy translating!