Seo Guide

Internationalize Your Next.js Site Without Rebuilding Routes

Published July 30, 2026

Internationalize Your Next.js Site Without Rebuilding Routes

Internationalizing a Next.js App Without Rebuilding Routing

If you’ve ever tried to add i18n to a Next.js project, you know the pain of re‑architecting your pages folder, updating next.config.js, and worrying about SEO‑friendly URLs. SiteLocaleAI solves that problem with a tiny, framework‑agnostic JavaScript library that works out‑of‑the‑box for any React‑based site.

Why Choose SiteLocaleAI for Next.js?

  • Drop‑in, framework‑agnostic – Just import a single script; no extra Babel plugins or custom server logic.
  • Self‑hosted – Use your own LLM API key (Claude, GPT‑4o‑mini, etc.) so you stay in control of data and costs.
  • Price localization – Automatic rounding and currency formatting per market (e.g., $9.99 → $10, €8.90 → €9).
  • SEO pre‑rendering CLI – Generate static, fully translated HTML for crawlers, ensuring every language version is indexed.
  • No routing changes – Keep the same URL structure (/product/123) and let the library serve the right language based on the visitor’s locale.

1. Install the Library

Add the npm package (or use a CDN) in your Next.js project:

npm i @sitelocaleai/core

Or, if you prefer a script tag for a quick test:

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

2. Initialize SiteLocaleAI in _app.js

Create a tiny wrapper that loads the library on the client side and injects the translated content.

// pages/_app.tsx
import { useEffect } from 'react';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    // The library reads `window.__LOCALEAI_CONFIG__` for settings.
    if (typeof window !== 'undefined' && (window as any).SiteLocaleAI) {
      (window as any).SiteLocaleAI.init({
        apiKey: process.env.NEXT_PUBLIC_LOCALEAI_API_KEY,
        defaultLocale: 'en',
        supportedLocales: ['en', 'es', 'fr', 'de', 'ja'],
        priceRounding: true,
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

Tip: Store your LLM API key in an environment variable (NEXT_PUBLIC_LOCALEAI_API_KEY). The library never sends raw page content to the LLM; it only sends the text snippets you ask it to translate.

3. Mark Up Translatable Elements

SiteLocaleAI works by scanning the DOM for elements with a data-locale-key attribute. You can generate these keys manually or let the CLI extract them for you.

// components/ProductCard.tsx
export default function ProductCard({ product }) {
  return (
    <div className="card" data-locale-key={`product-${product.id}`}>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p className="price" data-price="{product.price}" data-currency="USD" />
    </div>
  );
}

The data-price attribute tells SiteLocaleAI to localize the price using psychological rounding (e.g., $9.99 → $10). The library will replace the element’s inner text with the translated version at runtime.

4. Server‑Side Rendering (SSR) + SEO Pre‑Rendering

Search engines need a fully rendered HTML snapshot for each language. SiteLocaleAI ships a CLI that can pre‑render pages during your CI build.

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

The CLI:
1. Crawls your site.
2. Calls the LLM for each text node.
3. Generates static HTML files under ./out/en, ./out/es, etc.
4. Writes a sitemap.xml that includes language‑specific URLs (/es/product/123).

You can then serve the static folder with any CDN or host it on Vercel’s static mode.

Read more: The full CLI documentation is available in the SiteLocaleAI docs.

5. Handling Dynamic Routes

Next.js dynamic routes (pages/product/[id].tsx) stay untouched. The library reads the URL, determines the locale (via sub‑path, query param, or Accept‑Language header), and swaps the text on the fly.

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

export default function ProductPage({ product }) {
  const { locale } = useRouter(); // locale is set by SiteLocaleAI on the client
  return (
    <section data-locale-key={`product-${product.id}`}>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p data-price={product.price} data-currency="USD" />
    </section>
  );
}

No extra getStaticPaths or getStaticProps changes are required – the same page is served for every language, and the library takes care of the text swap.

6. SEO Best Practices with SiteLocaleAI

✅ Recommendation
Hreflang tags The CLI automatically injects <link rel="alternate" hreflang="..."> for each language version.
Canonical URLs Keep a single canonical URL per product; the language‑specific URLs are treated as alternates.
Meta tags Use data-locale-key on <title> and <meta name="description"> elements so they are translated as well.
Structured data Wrap JSON‑LD in a <script type="application/ld+json" data-locale-key="product-{{id}}-ld"> block.

Example meta translation:

<title data-locale-key="home-title">Welcome to Our Store</title>
<meta name="description" data-locale-key="home-desc" content="Shop the best products at unbeatable prices.">

7. Pricing Localization in Action

SiteLocaleAI’s price rounding works out‑of‑the‑box. Provide the raw price and currency, and the library will output a user‑friendly amount per locale.

<p class="price" data-price="19.99" data-currency="USD"></p>
  • US (en) → $20
  • EU (fr) → €17 (rounded to the nearest 5 €)
  • JP (ja) → ¥2,200 (rounded to the nearest 100 ¥)

This psychological rounding boosts conversion rates by reducing decision friction.

8. Deploying the Pre‑Rendered Site

After running the CLI, push the out folder to your hosting provider. If you’re on Vercel, set the project to Static Site Generation and point the output directory to out.

git add out && git commit -m "Add pre‑rendered multilingual pages" && git push origin main

Your site will now serve language‑specific static HTML to crawlers, while regular visitors still get the fast, client‑side translation fallback.

9. Quick Recap

  1. Install @sitelocaleai/core.
  2. Initialize it in _app.js with your LLM key.
  3. Mark translatable elements with data-locale-key.
  4. Run the SEO pre‑render CLI during CI.
  5. Deploy the static output – no routing changes required.

That’s it! You now have a fully internationalized Next.js site that scales across languages, currencies, and search engines without a single route rewrite.

Ready to Go Global?

Try SiteLocaleAI today and see how quickly you can launch a multilingual Next.js experience that delights users and dominates international search results.

Start your free trial →

Back to blog