Seamless Internationalization for Next.js Without Rebuilding Routes

Internationalizing a Next.js application is traditionally a heavyweight operation. You end up rewriting next.config.js, adding locale‑specific folders, and often triggering a full rebuild every time a new language is added. This not only slows down development but also poses a risk to SEO because search engines may see incomplete or duplicate content during the transition.

Enter SiteLocaleAI – a self‑hosted, drop‑in JavaScript library that brings LLM‑powered translation, price localization, and SEO pre‑rendering to any web stack, including Next.js, without ever touching the router.

---

1. The Conventional Next.js i18n Flow

Step	What You Do	Drawbacks
Configure i18n	Add locales, defaultLocale, and localeDetection in next.config.js.	Requires a full rebuild for every locale change.
Create locale folders	pages/en, pages/fr, etc.	Duplicates code, increases maintenance overhead.
Static Generation	Use getStaticProps with locale param.	Each locale generates a separate HTML file – can explode the build size.
SEO handling	Add <link rel="alternate" hreflang="..."> manually.	Easy to miss a language, leading to indexing issues.

The biggest pain point for many teams is routing. Next.js ties the locale to the URL structure (/en/about, /fr/about). Adding a new language means updating the config and redeploying – a costly cycle for fast‑moving SaaS products.

---

2. Why SiteLocaleAI Wins for This Use Case

✅ Drop‑in, Framework‑Agnostic

SiteLocaleAI is a single JavaScript file you import anywhere—React, Vue, WordPress, Shopify, or plain HTML. For a Next.js project you simply add the script to _app.js or a custom _document.js.

// pages/_app.js
import '../styles/globals.css';
import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://cdn.sitelocaleai.com/v1/siteLocaleAI.min.js"
        strategy="beforeInteractive"
        data-api-key={process.env.NEXT_PUBLIC_SITELOCALEAI_KEY}
        data-default-lang="en"
        data-supported-langs="en,fr,de,es,ja"
      />
      <Component {...pageProps} />
    </>
  );
}

No routing changes, no new pages, no rebuild.

✅ Self‑Hosted, API‑Key Controlled

You bring your own LLM API key (Claude, GPT‑4o‑mini, etc.). The library sends the original text to your LLM, receives the translation, and injects it into the DOM. Because the request happens on the server side (via Next.js API routes) or edge functions, you keep your keys safe.

// pages/api/translate.js
export default async function handler(req, res) {
  const { text, targetLang } = req.body;
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: `Translate to ${targetLang}: ${text}` }],
    }),
  });
  const data = await response.json();
  res.status(200).json({ translation: data.choices[0].message.content });
}

The same endpoint can be reused by the SiteLocaleAI script for every page, eliminating the need for locale‑specific builds.

✅ Price Localization with Psychological Rounding

E‑commerce sites often need more than text translation—they need price conversion that feels natural to local shoppers (e.g., $9.99 → €8.90). SiteLocaleAI’s built‑in price engine applies rounding rules per currency, so you never have to write custom math functions.

// Example: displaying a localized price
const priceInUSD = 12.99;
const localized = SiteLocaleAI.formatPrice(priceInUSD, 'EUR'); // → "€11,90"

✅ SEO‑Friendly Pre‑Rendering CLI

Search engines love static HTML. SiteLocaleAI ships a CLI that crawls your site, renders each page in every supported language, and writes out fully translated HTML files. You can then serve these files via a CDN or static hosting, guaranteeing that Google indexes the correct language version.

# Generate SEO‑ready pages
nlocaleai-cli --output ./public/seo --langs en,fr,de,es,ja

The CLI works on any static export (next export) and does not interfere with your dynamic routing logic.

✅ WordPress Plugin for Hybrid Sites

If part of your Next.js project lives inside a WordPress CMS (e.g., a headless WordPress backend), the SiteLocaleAI WordPress plugin lets you translate content without any Node.js on the server. This hybrid approach is impossible with the built‑in Next.js i18n.

---

3. Implementation Walk‑through

1. Install the library – add the script tag as shown above.
2. Configure supported languages – data-supported-langs attribute or a JSON config file.
3. Create an API route that proxies LLM calls (see the translate.js example).
4. Mark translatable elements – add data-i18n attributes or let SiteLocaleAI auto‑detect text nodes.
5. Run the SEO CLI – generate static, indexed pages for each locale.
6. Deploy – no changes to next.config.js or routing files.

Code Sample: Auto‑Detecting Text Nodes

// public/siteLocaleAI.init.js (automatically loaded)
SiteLocaleAI.init({
  apiEndpoint: '/api/translate',
  fallbackLang: 'en',
  onReady: () => {
    console.log('SiteLocaleAI is ready – all texts will be translated on the fly');
  },
});

All elements inside <body> that contain plain text will be sent to the API, translated, and replaced instantly. The process is asynchronous, so the page remains responsive.

---

4. Comparison Summary

Feature	Next.js Built‑in i18n	SiteLocaleAI
Routing changes	Required (locale sub‑paths)	None – works on existing routes
Build time	Increases with each locale	Constant – translation happens at runtime or via CLI
Price rounding	Manual implementation	Built‑in psychological rounding per currency
SEO pre‑render	Need custom scripts or next export per locale	One‑click CLI that outputs fully translated static HTML
Self‑hosted LLM	Not native – you must build your own	Native support; you supply your own API key
Framework lock‑in	Only works with Next.js	Works with any front‑end, including static sites, WordPress, Shopify

For a team that wants to add new languages on the fly, keep build times short, and maintain perfect SEO, SiteLocaleAI is the clear winner.

---

5. Get Started Today

Ready to internationalize your Next.js app without the routing nightmare? Check out the quick‑start guide and the price‑localization docs for deeper details.

Try SiteLocaleAI now – sign up for the $5 Indie plan, drop the library into your project, and see multilingual support appear instantly. Your global audience is waiting!