Tutorial

Pre‑rendered Multilingual Gatsby Site with SiteLocaleAI

Published September 27, 2026

Pre‑rendered Multilingual Gatsby Site with SiteLocaleAI

Pre‑rendered Multilingual Gatsby Site with SiteLocaleAI

Published on SiteLocaleAI Blog

Introduction

If you run a static Gatsby site, you already enjoy fast load times and excellent SEO out of the box. The next step is to make that site multilingual, localize prices for each market, and ensure search engines can crawl the translated pages. SiteLocaleAI makes this possible with a single, framework‑agnostic JavaScript library that you host yourself, plus a CLI that pre‑renders every language version for Google indexing.

In this tutorial we’ll:

  1. Install the SiteLocaleAI library in a Gatsby project.
  2. Configure language detection, translation, and price rounding.
  3. Use the SiteLocaleAI CLI to generate static HTML for each locale.
  4. Verify the output and submit a sitemap.

Tip: All steps work with any LLM API key (Claude, GPT‑4o‑mini, etc.). Keep your keys secret – they never leave your server.

1. Add SiteLocaleAI to Your Gatsby Project

First, create a new Gatsby site (or use an existing one). Then install the npm package:

npm install @sitelocaleai/sdk

Because the SDK is a plain JavaScript file, you can import it anywhere – React, Vue, plain HTML, or even a WordPress theme that uses Gatsby as a static generator.

Create a siteLocale.js file in the src folder:

// src/siteLocale.js
import { SiteLocale } from "@sitelocaleai/sdk";

// Load your LLM API key from an environment variable (never commit it)
const LLM_API_KEY = process.env.GATSBY_LLM_API_KEY;

// Initialize the library
export const locale = new SiteLocale({
  apiKey: LLM_API_KEY,
  provider: "openai", // or "anthropic", "gemini", etc.
  defaultLang: "en",
  supportedLangs: ["en", "es", "fr", "de", "ja"],
  // Price rounding rules – psychological pricing per currency
  priceRounding: {
    USD: (c) => Math.round(c * 0.99 * 100) / 100, // 9.99, 19.99, …
    EUR: (c) => Math.round(c * 0.99 * 100) / 100,
    JPY: (c) => Math.round(c) - 1, // 9, 19, 29
  },
});

Now wrap your root component so that every page gets the translation context:

// gatsby-browser.js
import React from "react";
import { LocaleProvider } from "@sitelocaleai/sdk";
import { locale } from "./src/siteLocale";

export const wrapRootElement = ({ element }) => (
  <LocaleProvider locale={locale}>{element}</LocaleProvider>
);

All text nodes inside your React components will be automatically translated at runtime. For static pre‑rendering we’ll let the CLI do the heavy lifting.

2. Mark Up Text and Prices for Translation

SiteLocaleAI works best when you mark translatable strings with the data-i18n attribute. Prices should be wrapped in a <span> with data-price so the rounding logic can apply.

// src/pages/index.jsx
import React from "react";

export default function Home() {
  return (
    <main>
      <h1 data-i18n="welcome">Welcome to Our Store</h1>
      <p data-i18n="intro">
        Discover the best products at prices you love.
      </p>
      <ul>
        <li>
          <strong data-i18n="product1">Premium Coffee</strong>
          <span data-price="USD" data-i18n="price">$12.00</span>
        </li>
        <li>
          <strong data-i18n="product2">Organic Tea</strong>
          <span data-price="USD" data-i18n="price">$8.50</span>
        </li>
      </ul>
    </main>
  );
}

The data-i18n keys are optional – if you omit them, the library will use the raw text as the translation source.

3. Pre‑render All Locales with the CLI

SiteLocaleAI ships a CLI that crawls your built site, calls the LLM for each language, and writes static HTML files. Install it globally (or as a dev dependency):

npm install -g @sitelocaleai/cli

Add a script to package.json:

{
  "scripts": {
    "build": "gatsby build",
    "locale:build": "sitelocaleai prerender --out-dir public --langs en,es,fr,de,ja"
  }
}

Run the normal Gatsby build, then the localization step:

npm run build && npm run locale:build

The CLI will:

  1. Load each HTML file from public/.
  2. Replace data-i18n text with the translated version using your LLM key.
  3. Apply the price rounding functions per currency.
  4. Write a new folder for each locale, e.g. public/es/, public/fr/.

You can inspect the results locally:

npm install -g serve
serve public/es

You should see the page in Spanish, with prices rounded to 9.99 €, 19.99 €, etc.

4. SEO – Sitemap and Meta Tags

Because the pages are now static HTML, Google can crawl them without JavaScript. Generate a multilingual sitemap:

nitemap-generator-cli -b https://example.com -o public/sitemap.xml "public/**/*.html"

Add <link rel="alternate" hreflang="..."> tags in the <head> of each page. SiteLocaleAI can inject them automatically:

// src/seo.jsx
import React from "react";
import { useLocale } from "@sitelocaleai/sdk";

export default function SEO({ title, description }) {
  const { currentLang, supportedLangs } = useLocale();
  return (
    <>
n      <title>{title}</title>
      <meta name="description" content={description} />
      {supportedLangs.map((lang) => (
        <link
          key={lang}
          rel="alternate"
          hrefLang={lang}
          href={`https://example.com/${lang}${window.location.pathname}`}
        />
      ))}
    </Helmet>
  );
}

Add the SEO component to each page, and submit sitemap.xml to Google Search Console.

5. Deploy

Deploy the public/ folder to any static host (Netlify, Vercel, Cloudflare Pages). Because the translation work is done at build time, there is zero runtime cost for the LLM – only the API calls you made during the CI step.

6. Verify Indexing

After deployment, use the site: operator in Google search:

site:example.com es "tienda"

If you see the Spanish version indexed, you’re good to go!

7. Next Steps

  • Add a language switcher UI that simply updates window.location.pathname to the locale folder.
  • Use the WordPress plugin from SiteLocaleAI if you ever migrate your content to WordPress – no Node.js required.
  • Explore the CLI options for incremental builds to speed up CI pipelines.

For more details on the SDK and CLI, see the official docs: https://sitelocaleai.com/docs.

Conclusion

By combining Gatsby’s static generation with SiteLocaleAI’s self‑hosted translation library, you get lightning‑fast, SEO‑friendly multilingual pages without paying for on‑the‑fly LLM calls. Prices are automatically rounded to psychological values per currency, and the whole workflow fits into a standard CI/CD pipeline.

Ready to internationalize your site? Try SiteLocaleAI today and watch your global traffic grow.

Back to blog