Internationalize Next.js Without Rebuilding Routes – SiteLocaleAI

When a Next.js application needs to go global, the default i18n routing (next-i18n-router, next-intl, etc.) often forces you to restructure your pages or app directory, add locale‑specific routes, and regenerate static builds. That overhead can be a blocker for fast‑moving teams or for SaaS products that want to roll out new markets on the fly.

SiteLocaleAI solves this problem with a tiny, framework‑agnostic JavaScript library that lives on the client (or can be pre‑rendered on the server) and translates any HTML fragment using the LLM of your choice. Because it works at the DOM level, you never touch Next.js routing, and you keep a single source of truth for your pages.

---

Why the Traditional Next.js i18n Approach Falls Short

Challenge	Typical Next.js i18n Solution	SiteLocaleAI Advantage
Routing changes	You must add [locale] folders or dynamic route segments, which triggers a full rebuild for each new language.	No routing changes – the library swaps text in place after the page loads.
Build time	Adding a language means a new static build for every locale (next export).	One build for all locales; translations are generated on demand or via CLI pre‑rendering.
Price localization	You need custom code or third‑party services to round prices per currency.	Built‑in psychological rounding per currency, driven by the same LLM that translates copy.
SEO	Static generation per locale is required for crawlers; otherwise you rely on client‑side rendering, which Google may not index fully.	CLI sitelocaleai prerender produces fully translated HTML files that can be served to bots, preserving SEO.
Vendor lock‑in	You are tied to the Next.js i18n API and its conventions.	Works with any framework (React, Vue, WordPress, Shopify, plain HTML) – just drop the script.

If you already have a Next.js site that works great in English, SiteLocaleAI lets you add the rest of the world without a single change to your routing logic.

---

Quick Start: Adding SiteLocaleAI to a Next.js App

1. Install the library (or just copy the minified script from the CDN). bash npm i @sitelocaleai/js
2. Create a tiny wrapper component that loads the library and passes your LLM API key. ```tsx // components/LocaleProvider.tsx import { useEffect } from 'react'; import { initLocaleAI } from '@sitelocaleai/js';

const LocaleProvider = ({ children }: { children: React.ReactNode }) => {
useEffect(() => {
initLocaleAI({
// Your LLM provider – Claude, GPT‑4o‑mini, etc.
apiKey: process.env.NEXT_PUBLIC_LLM_API_KEY,
// Optional: default target language
defaultLang: 'es',
// Enable price rounding
priceLocalization: true,
});
}, []);

 return <>{children}</>;

};

export default LocaleProvider;

3. **Wrap your app** in `_app.tsx` – no routing changes needed.
tsx
// pages/_app.tsx
import '../styles/globals.css';
import LocaleProvider from '@/components/LocaleProvider';

function MyApp({ Component, pageProps }) {
return (



);
}

export default MyApp;

4. **Mark translatable elements** with the `data-locale` attribute. The library will replace the inner text automatically.
html

Welcome to our store

Discover the best products at prices you love.

$49.99
``
Thedata-currency` flag tells SiteLocaleAI to apply psychological rounding (e.g., $49.99 → $49.00 for US, €44.99 → €45.00 for EU).

That’s it. Your Next.js pages stay exactly the same, but every element marked with data-locale will be translated on the fly based on the visitor’s language preference.

---

SEO‑Friendly Pre‑Rendering with the CLI

Search engines still favor static HTML. SiteLocaleAI ships a CLI tool that crawls your site, runs the LLM translations, and writes fully rendered HTML files for each locale.

n npx @sitelocaleai/cli prerender \
  --url https://myshop.com \
  --locales en,es,fr,de,ja \
  --output ./out

• The CLI respects your existing next export output, overwriting only the body content.
• Generated files are served directly to bots, giving you the same SEO juice as a hand‑crafted multilingual site.
• Because the CLI runs once per deployment, you keep build times low while still delivering indexed translations.

You can integrate the CLI into your CI pipeline:

# .github/workflows/deploy.yml
name: Deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install deps
        run: npm ci
      - name: Build Next.js
        run: npm run build && npm run export
      - name: Pre‑render locales
        env:
          LLM_API_KEY: ${{ secrets.LLM_API_KEY }}
        run: |
          npx @sitelocaleai/cli prerender \
            --url https://myshop.com \
            --locales en,es,fr,de,ja \
            --output ./out
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'

Now every push results in a fully indexed multilingual site without touching Next.js routing.

---

WordPress & Other Platforms – No Node Required

If you run a WordPress front‑end that serves a Next.js headless front, you can still benefit from SiteLocaleAI:
- WordPress plugin (available in the repo) injects the same data-locale attributes into rendered content.
- No Node.js is needed on the server – the plugin simply adds the script tag and a small PHP wrapper for API key storage.
- This makes SiteLocaleAI a single solution for both your headless React app and traditional CMS pages.

---

Pricing Overview (for reference)

Plan	Price	Ideal For
Indie	$5/mo	Solo developers, hobby projects
Starter	$49/mo	Small SaaS, e‑commerce stores
Growth	$99/mo	Mid‑size businesses with multiple locales
Enterprise	$249/mo	Large brands, custom SLAs

All plans include unlimited translations, price rounding, and CLI access. You only pay for the LLM usage you incur – the library itself is free and open‑source.

---

TL;DR – Why SiteLocaleAI Wins for This Use Case

• Zero routing changes – keep your existing Next.js pages untouched.
• Self‑hosted LLM keys – use Claude, GPT‑4o‑mini, or any compatible provider.
• Built‑in price localization – psychological rounding per currency.
• SEO‑ready pre‑rendering – CLI generates static HTML for crawlers.
• Framework‑agnostic – same library works in React, Vue, WordPress, Shopify, etc.

If you want to launch multilingual support today without a massive rebuild, SiteLocaleAI is the fastest, most cost‑effective path.

---

Try It Now

Ready to internationalize your Next.js site in minutes? Grab the free Indie plan, add the script, and watch the world open up.

Start your free trial →

---

For deeper technical details, see the official documentation:
- https://sitelocaleai.com/docs/quick-start
- https://sitelocaleai.com/docs/cli