Skip to content

README.md

Latest commit

 

History

History
55 lines (37 loc) · 2.35 KB

README.md

File metadata and controls

55 lines (37 loc) · 2.35 KB

Next.js Markdoc Localization Example

Demonstrates automated localization for a Next.js App Router site that authors long-form content in Markdoc and UI strings in JSON, using Lingo.dev CLI and GitHub Actions.

Full walkthrough: lingo.dev/en/guides/markdoc-nextjs-localization

What's inside

  • src/app/[lang]/ – Next.js App Router, locale-scoped routes
  • src/content/en/pages/*.md, src/content/en/blog/*.md – source Markdoc content (English)
  • src/content/en/ui.json – source UI-string catalog
  • src/markdoc.schema.ts – custom Markdoc tag schema wired to React components
  • src/proxy.ts – middleware that redirects bare paths to the visitor's best-matching locale
  • i18n.json – Lingo.dev CLI configuration (two buckets: markdoc, json)
  • .github/workflows/translate.yml – GitHub Actions workflow

Quick start

  1. Fork this repo
  2. Add LINGODOTDEV_API_KEY to Settings > Secrets and variables > Actions
  3. Push a change to any file under src/content/en/
  4. Translations appear automatically via commit to main

How it works

The Lingo.dev CLI reads the source Markdoc files and ui.json, identifies new or changed entries using a lockfile, translates the delta through a configured localization engine, and writes per-locale files into src/content/[locale]/. Frontmatter, Markdoc custom tags, and JSON shape are preserved – only translatable text changes. The GitHub Actions workflow runs this on every push to main.

Next.js routes under src/app/[lang]/ load the matching locale's files at request time. A middleware inspects the Accept-Language header and redirects bare paths like / or /blog/hello-markdoc to the best-matching locale.

Locales

  • Source: en
  • Targets: es, fr, de

Running locally

pnpm install
pnpm dev

Open http://localhost:3000 – you'll be redirected to /en, /es, /fr, or /de based on your browser's Accept-Language.

To translate locally:

pnpm lingo

Links