Better Translateホーム
GitHub
はじめる
  • はじめに
  • ミッション
  • インストール
  • CLI
  • スキル
  • RTL
  • 変更履歴
アダプター
  • コア
  • React
  • Expo
  • Astro
  • MD & MDX
  • Next.js
  • TanStack Router

MD & MDX

ドキュメント、ブログ記事、コンテンツページがローカライズされた .md または .mdx ファイルにある場合は、@better-translate/md を使用します。

このパッケージはコア翻訳機能を置き換えるものではありません。すでに作成した翻訳機能からロケールルールを読み取ります。

1. パッケージをインストールする

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

2. 翻訳機能を作成する

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. コンテンツフォルダを作成する

同じルート配下にロケールごとに1つのフォルダを配置します:

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

4. Markdownヘルパーを作成する

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. ドキュメントを読み込む

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. 出力が必要なときにコンパイルする

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

サーバーヘルパーを使用するタイミング

アプリですでにサーバー上でリクエストロケールを解決している場合は、@better-translate/md/server を使用して、Markdownの読み込みが同じリクエストロケールに自動的に従うようにします。

ローカライズされたMarkdownを自動生成する

CLIの markdown.rootDir オプションを使用して、ジェネレーターでMarkdownファイルを翻訳します:CLIガイド

例

  • md-nextjs-example