Does it handle SEO: one URL per language and hreflang?

今日は無理です。訪問者の言語情報はクッキーに保存されており、すべての言語が同じURLで提供されるため、検索エンジンはソース言語のみをインデックスに登録します。ページタイトルや説明文は、generateMetadata内のtDynamicAllを使用して翻訳できます。今すぐ言語ごとにインデックス登録されるURLが必要な場合は、next-intlやParaglide JSなど、ロケールルーティング機能を備えたライブラリをご利用ください。

How do I translate dynamic content from a CMS, an API or users?

このプラグインは、コード内に記述されたテキストのみを翻訳します。コードから参照されないコンテンツについては、Next.jsのサーバーコンポーネント内で、@weglot/translate-react/dynamic から tDynamic、tDynamicAll、または tDynamicHtml を呼び出してください。APIの処理に500ミリ秒以上かかった場合、またはテキストが初めてリクエストされた場合は、ソーステキストが返されます。その後のリクエストでは、翻訳済みのテキストが返されます。データを独自にキャッシュする場合は、訪問者の言語に基づいてキャッシュを管理してください。

Next.js or Vite: what changes?

Next.js では、@weglot/translate-react/next の withWeglot と、@weglot/translate-react/react/next の WeglotProvider を使用しています。Vite では、@weglot/translate-react/vite の weglotPlugin と、@weglot/translate-react/react の WeglotProvider を使用しています。Webpack では、@weglot/translate-react/webpack の weglotPlugin を使用しています。動的コンテンツ機能は、Next.jsのサーバーコンポーネント内でのみ実行されます。

Does it work with React Server Components?

はい、Next.jsのApp Routerを使用します。@weglot/translate-react/react/next から WeglotProvider をインポートすることで、言語を変更した際にサーバーコンポーネントが再読み込みされるようになります。tDynamic、tDynamicAll、および tDynamicHtml は、サーバーコンポーネント内でサーバーサイドで実行されます。

What happens when I build?

このプラグインは、sourceRoot 以下の JSX 内のテキストを検出し、Weglot API に、まだ翻訳されていない部分について翻訳をリクエストします。Weglot は LLM を使用して翻訳を生成し、ビルドは translationTimeout（デフォルトは 300 秒）まで待機します。その後、public/translations/ に書き込みを行います。 .json。変換に失敗した場合、ビルドは失敗し、受け取ったデータをローカルキャッシュに保持します。続行するには、再度ビルドを実行してください。buildMode: "cache-only" を指定すると、ビルドはネットワーク呼び出しを行いません。

Where are the translations stored?

Weglot プロジェクト内で、翻訳内容を確認・編集します。また、各ビルドでは、受け取った翻訳が /weglot/cache/ .json。APIを呼び出さずにビルドする場合は、そのフォルダをコミットするか、無視してください。public/translations/ は自動生成されるため、.gitignore に追加してください。

What gets translated, and how do I exclude something?

JSX内のテキスト、JSX式内の文字列リテラル、定数から読み込まれる文字列、およびtitle、alt、placeholder、aria-labelなどの属性。JSX外のコード、URL、クラス名、および文字列は変更されません。要素を元の言語のままにするには、translate="no" または data-weglot-skip を追加してください。translatableAttributes を使用して、独自のテキストプロパティを宣言してください。

@weglot/translate-react

あなたの
React, Next.js または Vite アプリ

t() ラッパーも、JSON ファイルも不要です。ビルドプラグインとWeglot の API キーを追加するだけで、アプリのビルド時に JSX 内のテキストが翻訳され、チームメンバーはコードに触れることなくWeglot で翻訳を編集できます。

APIキーを取得する

のプロンプトをコピーしてください・・・ドキュメントを読む・ npmで表示

必要条件 React 19 Next.js 15 / 16.0.4 以降（App Router）または Vite Node 20.9 以降

// how it works

4つのステップです。コンポーネントはそのままの状態で維持されます。

ソース言語とターゲット言語は、コードではなく、Weglot プロジェクトから取得されます。このプラグインは、ビルド時にJSX内のテキストを読み取り、その翻訳を取得します。

パッケージをインストールし、APIキーを追加してください

Weglot 2.0 プロジェクトを作成し、プロジェクト設定から API キーをコピーします。そのキーは pk_. 保持 .env バージョン管理の対象外。
terminal · .env
```
$ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key
```

プラグインを追加する

Next.jsの設定を次のようにラップしてください withWeglot. ポイント sourceRoot ページやコンポーネントが格納されているフォルダへ。

追加 weglotPlugin Viteの設定ファイルに追加します。Webpackを使用する場合は、以下からインポートしてください。 @weglot/translate-react/webpack その代わりに。

next.config.ts

import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

vite.config.ts

import { defineConfig } from "vite";
import { weglotPlugin } from "@weglot/translate-react/vite";

export default defineConfig({
  plugins: [weglotPlugin({ sourceRoot: "src" })],
});

プロバイダーを追加する

ルートレイアウトを以下で囲んでください WeglotProvider Next.jsのエントリポイントから実行することで、言語を変更した際にサーバーコンポーネントが再読み込みされるようになります。

アプリを次のものでラップしてください WeglotProvider、できるだけ早い段階で。

app/layout.tsx

import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

src/main.tsx

import { WeglotProvider } from "@weglot/translate-react/react";

root.render(
  <WeglotProvider>
    <App />
  </WeglotProvider>,
);

プロジェクトのあらゆる言語でビルドし、リリースする

各ビルドでは、Weglot から不足している翻訳を取得し、 public/translations/<locale>.json. そのフォルダは無視してください。以下のコードで言語切り替え機能を追加してください。 LocaleSwitcher または useWeglotContext.
.gitignore
```
public/translations/
```

// compare

定番のi18nライブラリを使ってみるのはどうでしょうか？

i18n ライブラリでは、すべての文字列をキーに置き換え、言語ごとに 1 つのファイルを用意するよう求められます。Weglot は、すでに記述済みの文字列を読み込みます。以下に、各オプションの比較を示します。

各プロジェクトの公開ドキュメント（Weglot 、next-intl、Paraglide JS、Contentful、Sanity、Strapi）に基づき、2026年11月現在。
基準	Weglot `@weglot/translate-react`	next-intl / i18next	パラグライド JS	CMSのネイティブロカライズ
文字列を t() やメッセージ関数で囲む	いいえJSX内のテキストはビルド時に検出されます。	はい`t("key")` すべての文字列について。	はい`m.key()` メッセージ機能。	コンテンツのみコード内の文字列には、依然としてライブラリが必要です。
言語ごとの翻訳ファイル	メンテナンス対象なしビルド時に生成され、Gitで無視されています。	はい通常、ロケールごとに1つのJSONファイルとなります。	はいロケールごとに1つのメッセージファイルです。	いいえCMSには保存されていません。
多言語対応のURL設定とSEO（言語ごとのURL、hreflang）	まだです言語情報はクッキーに保存されています。すべての言語でURLは共通で、ソース言語がインデックス化されています。	next-intl: はいロケールルーティングは標準で搭載されています。i18next：フレームワークの設定を通じて利用可能です。	はいローカライズされたURLが標準搭載されています：ロケールプレフィックス、翻訳済みのパス、またはドメイン。hreflangタグはご自身で追加してください。	フロントエンドヘッドレスCMSは、ロケールごとにコンテンツを保存します。URLとhreflangはフロントエンドから取得されます。
あなたのために生成された翻訳	はいWeglot ビルド中にLLMを用いて翻訳を行います。	いいえご自身で翻訳を用意するか、TMSをご利用ください。	ツールを使用してinlang CLI機械翻訳、またはご自身のコーディングエージェント。	有料アドオン有料プランでのAI翻訳機能：Contentful AI Actions、Sanity AI Assist、Strapi AI Translations。
開発者を介さずに翻訳を編集する	はいWeglot のダッシュボードで確認・編集してください。	いいえJSONファイルを編集するか、別のTMSを追加してください。	Finkを使用する場合inlangのWebエディタと、GitHubアカウントを使って。	はいCMSエディタ内で。
1つのプロンプトでコーディングエージェントによって設定された	はいインストールは1回、設定の編集は2か所です。以下のプロンプトをコピーしてご利用ください。	時間がかかるタスクエージェントは、すべての文字列をキーとファイルに書き換えます。	時間がかかる作業`init` エージェントの入力プロンプトが表示されずに実行される場合、すべての文字列が `m.key()` メッセージ。	該当なしCMSで設定されています。

// built for coding agents

AIコーディングエージェント向けに開発されました

Claude Code、Cursor、またはCodexを使用して構築する場合、エージェントが自動的にWeglot を追加することができます。書き換える必要がある文字列はないため、変更点は少なく、レビューも容易です。

01 · セットアップ

担当者がそれをインストールして設定します

1 npm install, 1つのプラグイン、1つのプロバイダー、1行の .gitignore。エージェントが要求するのはAPIキーだけです。

02 · ドキュメント

LLMが読み取れるドキュメント

そのドキュメントには llms.txt インデックス、そして各ページにはMarkdown版があります：追加 .md そのURLに。

03 · プロンプト

コピーできるプロンプト

プロンプトの各手順は、実際のインポートパスを含む「はじめに」ガイドと一致しています。以下にコピーしてください。

Claudeコードを貼り付ける

カーソル位置に貼り付け（エージェントモード）

Codexに貼り付ける

アプリで実行する

$ npm install @weglot/translate-react

// for your team

コードに触れずに編集・レビューを行う

すべての翻訳は、Weglot プロジェクトに反映されます。製品チーム、マーケティングチーム、および翻訳者は、プルリクエストを開くことなく、そこで文言を確認・編集します。

Weglot がアプリ用に生成した翻訳を確認してください。
Weglot のダッシュボードで、任意の翻訳を編集できます。
除外する 次のようなコードに含まれるあらゆるもの translate="no" または data-weglot-skip.

// fit

Weglot を使用すべき場合と、使用すべきでない場合

このパッケージはプレビュー版です。現時点での位置付けは以下の通りです。

以下の場合は、@weglot/translate-react をご利用ください。

このアプリは、Next.js（App Router）またはVite上でReact 19を実行しています。
文字列を t() で囲んだり、言語ごとに1つのファイルを用意したりするのは避けたいところです。
コーディングエージェントがコードの大部分を作成するため、翻訳もそれに追いつくようにしたいと考えています。
プログラミングができない人でも、翻訳の確認や編集を行う必要があります。
UIのテキストはコード内に記述されており、CMSコンテンツはサーバーサイドで翻訳可能です。

以下の場合は別の方法を使用してください

言語ごとに1つのURLが必要であり、翻訳されたページは今すぐ検索エンジンにインデックスされる必要があります。next-intl または Paraglide JS をご利用ください。
翻訳はリポジトリ内のファイルとして保存し、プルリクエストでレビューを行うようにします。Paraglide JS または i18next と組み合わせて inlang を使用してください。
お使いのアプリは、React 18、Next.js Pages Router、または Next.js 14 以前のバージョンを使用しています。
あなたのサイトはReactではなく、CMSやウェブサイトビルダーで構築されています。Weglot のCMS連携機能をご利用ください。

よくあるご質問（FAQ）

SEOに対応していますか？言語ごとに1つのURLやhreflangは設定されていますか？

今日は違います。訪問者の言語情報はクッキーに保存されており、どの言語でも同じURLで提供されるため、検索エンジンはソース言語のみをインデックスに登録します。

ページタイトルや説明文は、以下の方法で翻訳できます。 tDynamicAll in generateMetadata. 現時点で言語ごとのインデックス付きURLが必要な場合は、next-intl や Paraglide JS など、ロケールルーティング機能を備えたライブラリをご利用ください。

CMS、API、またはユーザーからの動的コンテンツをどのように翻訳すればよいですか？

このプラグインは、コード内に記述されたテキストのみを翻訳します。コードから参照されないコンテンツについては、 tDynamic, tDynamicAll または tDynamicHtml 出典： @weglot/translate-react/dynamic Next.jsのサーバーコンポーネントにおいて。

APIの処理に500ミリ秒以上かかった場合、またはテキストが初めてリクエストされた場合は、原文を返します。翻訳結果は、その後のリクエストで利用可能になります。データを独自にキャッシュする場合は、キャッシュを訪問者の言語に基づいて設定してください。

Next.js それとも Vite：何が違うのか？

Next.js では withWeglot 出典： @weglot/translate-react/next そして WeglotProvider 出典： @weglot/translate-react/react/next. Viteは weglotPlugin 出典： @weglot/translate-react/vite そして WeglotProvider 出典： @weglot/translate-react/react. Webpack は weglotPlugin 出典： @weglot/translate-react/webpack.

動的コンテンツ機能は、Next.jsのサーバーコンポーネント内でのみ動作します。

React Server Components でも動作しますか？

はい、Next.jsのApp Routerを使います。インポート WeglotProvider 出典： @weglot/translate-react/react/next これにより、言語を変更するとサーバーコンポーネントが更新されます。 tDynamic, tDynamicAll そして tDynamicHtml サーバー側で、サーバーコンポーネント内で実行されます。

ビルドするとどうなるのですか？

このプラグインは、JSX内の以下の箇所にあるテキストを検出します。 sourceRoot そして、Weglot API に、不足している翻訳をリクエストします。Weglot はLLMを使用してそれらを生成し、ビルドは最大 translationTimeout （デフォルトでは300秒）。その後、次のように書き込みます。 public/translations/<locale>.json.

翻訳に失敗した場合、ビルドは失敗し、受け取ったデータはローカルキャッシュに保持されます。続行するには、再度ビルドを行ってください。 buildMode: "cache-only"、このビルドではネットワーク呼び出しは一切行われません。

翻訳データはどこに保存されていますか？

Weglot プロジェクト内で、翻訳内容を確認・編集します。また、各ビルドでは、受け取った翻訳が <sourceRoot>/weglot/cache/<locale>.json. APIを呼び出さずにそのフォルダをビルドにコミットするか、無視してください。 public/translations/ が生成され、以下に格納されます .gitignore.

どのような内容が翻訳されるのか、また、特定の項目を除外するにはどうすればよいですか？

JSX 内のテキスト、JSX 式内の文字列リテラル、定数から読み込まれた文字列、および次のような属性など title, alt, placeholder そして aria-label. JSX 以外のコード、URL、クラス名、および文字列は変更されません。追加 translate="no" または data-weglot-skip 要素を元の言語のまま保持するため。独自のテキストプロパティを次のように宣言します。 translatableAttributes.

Reactアプリを書き直さずに多言語対応にする

パッケージをインストールし、APIキーを追加して、ビルドしてください。

ターミナル

$ npm install @weglot/translate-react