I18n | fromsrc

Support multiple languages in your documentation.

Content organization

Separate folders

Organize translated content by locale:

docs/
  en/
    index.mdx
    quickstart.mdx
  fr/
    index.mdx
    quickstart.mdx
  de/
    index.mdx
    quickstart.mdx

File extensions

Use locale suffixes:

docs/
  index.mdx           # default (en)
  index.fr.mdx        # french
  index.de.mdx        # german

URL patterns

Subpath (recommended)

docs.example.com/en/guide
docs.example.com/fr/guide
docs.example.com/de/guide

// app/[locale]/docs/[...slug]/page.tsx
export default function Page({ params }) {
  const { locale, slug } = params
  return <DocPage locale={locale} slug={slug} />
}

Subdomain

en.docs.example.com/guide
fr.docs.example.com/guide
de.docs.example.com/guide

Language switcher

tsx

import { LanguageSwitch } from "fromsrc/client";

<LanguageSwitch
  current="en"
  locales={[
    { code: "en", label: "English" },
    { code: "fr", label: "Français" },
    { code: "de", label: "Deutsch" },
  ]}
  onChange={(locale) => router.push(`/${locale}${pathname}`)}
/>;

RTL support

For right-to-left languages like Arabic and Hebrew:

tsx

<html dir={locale === "ar" ? "rtl" : "ltr"}>

css

[dir="rtl"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--color-line);
}

Content loading

Load localized content dynamically:

export async function getDocs(locale: string) {
  const files = await glob(`docs/${locale}/**/*.mdx`);
  return files.map((file) => loadDoc(file));
}

Fallbacks

Fall back to default locale when translation missing:

async function getDoc(locale: string, slug: string) {
  const localizedPath = `docs/${locale}/${slug}.mdx`;
  const defaultPath = `docs/en/${slug}.mdx`;

  const exists = await Bun.file(localizedPath).exists();
  return loadDoc(exists ? localizedPath : defaultPath);
}

Translation workflow

Recommended tools

crowdin - translation management
lokalise - localization platform
phrase - translation automation

Sync workflow

bash

# export source strings
bun run i18n:export

# import translations
bun run i18n:import

# build all locales
bun run build

Metadata

Localize page metadata:

tsx

export async function generateMetadata({ params }) {
  const doc = await getDoc(params.locale, params.slug);
  return {
    title: doc.title,
    description: doc.description,
    alternates: {
      languages: {
        en: `/en/${params.slug}`,
        fr: `/fr/${params.slug}`,
      },
    },
  };
}

Search

Index each locale separately:

const enIndex = createSearchIndex(enDocs);
const frIndex = createSearchIndex(frDocs);

function search(query: string, locale: string) {
  const index = locale === "fr" ? frIndex : enIndex;
  return index.search(query);
}