Seo Guide

Add Internationalization to Next.js Without Rebuilding Routing

Published July 22, 2026

Add Internationalization to a Next.js App Without Rebuilding Routing

Internationalizing a Next.js site can feel like a massive refactor, especially when you have to change the file‑based routing to support language prefixes (/en, /fr, etc.). SiteLocaleAI eliminates that pain. By loading a tiny, framework‑agnostic JavaScript library at runtime, you can serve translated content, localize prices, and even pre‑render SEO‑friendly pages—without touching your existing routes.

1. Why Choose SiteLocaleAI for Next.js?

Feature	Benefit
Drop‑in library	Works with any framework—React, Vue, WordPress, Shopify, or plain HTML.
Self‑hosted	You provide your own LLM API key (Claude, GPT‑4o‑mini, etc.), keeping data private and costs predictable.
Price localization	Automatic rounding to psychological price points per currency (e.g., $9.99 → €8.99).
SEO pre‑rendering CLI	Generates static HTML for each language, so Google indexes the fully translated content.
WordPress plugin	No Node.js required for non‑JS sites.

All of this fits perfectly into a Next.js project that already uses static generation (getStaticProps) or server‑side rendering (getServerSideProps).

2. Install the Library

First, add the library to your project. It’s a single npm package, but you can also load it from a CDN if you prefer a zero‑install approach.

# Using npm
npm install @sitelocaleai/js

# Or Yarn
yarn add @sitelocaleai/js

If you want a CDN version, just add the script tag to your _document.js:

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"
            defer
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

3. Configure the Library (Self‑Hosted LLM)

Create a small config file that reads your LLM API key from an environment variable. This keeps the key out of the client bundle.

// lib/sitelocaleConfig.ts
export const siteLocaleConfig = {
  apiKey: process.env.NEXT_PUBLIC_LOCALEAI_API_KEY!, // e.g., Claude or GPT‑4o‑mini key
  targetLanguages: ['en', 'fr', 'de', 'es'], // languages you support
  priceRounding: true, // enable psychological rounding
};

Tip: Store the key in a .env.local file and never commit it.

4. Initialize the Library in a Global Layout

Because SiteLocaleAI is framework‑agnostic, you can initialise it once in a top‑level component such as pages/_app.tsx or a custom Layout component.

// pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { siteLocaleConfig } from '@/lib/sitelocaleConfig';

export default function MyApp({ Component, pageProps }: AppProps) {
  // Initialise on the client side only
  if (typeof window !== 'undefined') {
    // @ts-ignore – the CDN script adds a global `SiteLocaleAI`
    window.SiteLocaleAI?.init(siteLocaleConfig);
  }

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

The library now watches the DOM and replaces any translatable text nodes with the appropriate language version. It also rewrites price elements that have a data-price attribute.

5. Markup Your Content for Translation & Price Localization

Text

nWrap any text you want translated in a <span data-translate> element. The library will fetch the translation from your LLM and replace the inner text.

<h1 data-translate>Welcome to Our Store</h1>
<p data-translate>Find the best products at unbeatable prices.</p>

Prices

Add a data-price attribute with the base price in USD. The library will convert, round, and display the price in the visitor’s currency.

<p>
  <span data-price="49.99" data-currency="USD"></span>
</p>

You can also combine both:

<div data-translate>
  <strong data-price="199.00" data-currency="USD"></strong> <span>Premium Package</span>
</div>

6. SEO‑Friendly Pre‑Rendering with the CLI

Search engines can’t execute JavaScript that relies on external LLM calls. SiteLocaleAI’s CLI solves this by generating static HTML for each language during the build step.

6.1 Install the CLI globally (or as a dev dependency)

npm i -D @sitelocaleai/cli
# or
yarn add -D @sitelocaleai/cli

6.2 Add a script to `package.json`

{
  "scripts": {
    "build": "next build && next export",
    "prerender": "sitelocaleai prerender --out ./out --langs en,fr,de,es"
  }
}

Running npm run prerender will:
1. Crawl the exported static site (./out).
2. Call your LLM for each translatable node.
3. Replace the content with the translated version.
4. Write separate HTML files for each language (e.g., out/fr/index.html).

Now Google sees the fully translated markup and indexes each language version correctly.

7. Verifying the Integration

Local dev – Start the dev server and add ?lang=fr to the URL. You should see French text and Euro‑rounded prices.
Production build – Run npm run build && npm run prerender. Inspect the generated out/fr/index.html to confirm the static translations.
Google Search Console – Submit the language‑specific URLs (/fr/, /de/, etc.) for indexing.

8. Internal Resources

Detailed setup guide: https://sitelocaleai.com/docs/quickstart
SEO pre‑rendering documentation: https://sitelocaleai.com/docs/seo-prerender

9. Wrap‑Up

By leveraging SiteLocaleAI’s self‑hosted JavaScript library, you can internationalize a Next.js app without touching the routing layer. The approach keeps your codebase clean, respects privacy (you own the LLM keys), and delivers SEO‑ready, price‑localized pages that search engines love.

Ready to go global in minutes? Try SiteLocaleAI today and see how easy internationalization can be.

Back to blog