Better TranslateInicio
GitHub
Empezar
  • Introducción
  • Misión
  • Instalación
  • CLI
  • Habilidades
  • RTL
  • Changelog
Adaptadores
  • Core
  • React
  • Expo
  • Astro
  • MD y MDX
  • Next.js
  • TanStack Router

MD y MDX

Usa @better-translate/md cuando tu documentación, entradas de blog o páginas de contenido vivan en archivos .md o .mdx localizados.

Este paquete no sustituye al traductor core. Lee las reglas de locale del traductor que ya creaste.

1. Instalar los paquetes

npm install @better-translate/core @better-translate/md

2. Crear el traductor

Crea src/i18n.ts:

ts
1import { configureTranslations } from "@better-translate/core";23const en = {4  docs: {5    title: "Docs",6  },7} as const;89const es = {10  docs: {11    title: "Documentacion",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. Crear las carpetas de contenido

Coloca una carpeta por locale bajo la misma raíz:

txt
1content/docs/2  en/3    getting-started.mdx4  es/5    getting-started.mdx

4. Crear los helpers de markdown

Crea src/docs.ts:

ts
1import { createMarkdownHelpers } from "@better-translate/md";23import { translator } from "./i18n";45export const docs = createMarkdownHelpers(translator, {6  rootDir: "./content/docs",7});

5. Leer un documento

ts
1import { docs } from "./docs";23const englishDoc = await docs.getDocument("getting-started", {4  locale: "en",5});67const spanishDoc = await docs.getDocument("getting-started", {8  locale: "es",9});

6. Compilar cuando necesites salida

ts
1const compiled = await docs.compileDocument("getting-started", {2  locale: "en",3});45compiled.kind; // "md" or "mdx"6compiled.path;7compiled.usedFallback;

Cuándo usar los helpers de servidor

Si tu app ya resuelve el locale de la petición en el servidor, usa @better-translate/md/server para que la carga de markdown siga el mismo locale de la petición automáticamente.

Generar markdown localizado automáticamente

Usa la opción markdown.rootDir de la CLI para que el generador traduzca tus archivos markdown: Guía de la CLI

Ejemplos

  • md-nextjs-example