@weglot/translate-react

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

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

APIキーを取得する

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

// what your users see

あなたが書いたJSXを、あらゆる言語で

テキストを一度記述するだけで済みます。Weglot がビルド時に翻訳を行います。

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

同じボタンで5カ国語に対応。幅はリアルタイムで測定されます。

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

キーもt()も不要です。JSXでテキストを記述するだけでOKです。

0加算のための t() の呼び出し
0メンテナンスが必要な翻訳ファイル
1npm install
2コードの修正：プラグインとプロバイダー

// how it works

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

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

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

    Weglot 2.0 プロジェクトを作成し、プロジェクト設定から API キーをコピーします。そのキーは pk_. 保持 .env バージョン管理の対象外。

    terminal · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. プラグインを追加する

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

    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" });
}

  3. プロバイダーを追加する

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

    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>
  );
}

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

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

    .gitignore
    public/translations/

// under the hood

構築するとどうなるのか

  1. 01 JSXを読み込みます
  2. 02新しいテキストを送信する
  3. 03『Weglot 』の翻訳
  4. 04言語ごとに1つのファイルを作成する

// every language of your project

1回のビルドで、追加するすべての言語に対応

Weglot で言語を選択してください。次のビルドでそれらが反映されます。

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Weglot で言語を追加し、ビルドを実行してください。翻訳ファイルはアプリとともにデプロイされます。

// built for coding agents

担当者が手配します

書き換える必要があるコードがないため、変更点は少なく、レビューも簡単です。

どのコーディングエージェントでも構いません。普段使っているエージェントに、プロンプトを1つ貼り付けてください。

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

Docsエージェントが読み取れる形式。各ページごとに「llms.txt」インデックスとMarkdownファイルが必要です。

✓パッケージをインストールしますpackage.json
✓プラグインを追加しますnext.config.ts
✓プロバイダーを追加しますlayout.tsx
✓生成されたファイルを無視する.gitignore
?APIキーの入力を求めます.env

確認できる差分です。文字列の書き換えはありません。

Claudeコードを貼り付ける

      

      
      
      
    

  

        

        
プロンプトをコピーしてください。「はじめに」ガイドと同じ手順です。

      

    

  










  

    
// what gets translated

    
このプラグインは、コード内のテキストを認識します

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
テキストが翻訳されます。JSXテキスト、リテラル、定数、alt、title、placeholder、aria-label。

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
コードはそのままにしておきます。クラス名、URL、ロジックも同様です。

      
translate="no"
お任せします。要素をそのままにするか、data-weglot-skip を使用してください。

    

  











  

    
// for your team

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

    

      

      

        
my-next-app ›ドイツ語レビュー数：2件

        
出典ドイツ語ステータス

        
Save changesÄnderungen speichernレビュー済み

        
Start your free trialKostenlos testen編集

        
Cancel anytime.Jederzeit kündbar.まとめると

        
Choose your planWählen Sie Ihren Tarifまとめると

      

      
『Weglot 』誌のレビュー。製品、マーケティング、翻訳担当者が文言を編集しています。

      
Edit saved · Kostenlos testen
No code change
単語の修正のためのプルリクエストは不要です。

      
レビューした内容を追跡します。各言語の進捗状況を確認できます。

    

  









  

    
// fit

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

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

    

      
Next.js アプリルーター
対応済み
Next.js 15 または 16.0.4 以降、React 19。

      
Vite
対応済み
React 19、Node 20.9 以上。Webpack も動作します。

      
React サーバーコンポーネント
対応済み
言語を変更すると、サーバーコンポーネントが再読み込みされます。

      
CMSおよびAPIのコンテンツ
対応済み
～とともに tDynamic Next.jsのサーバーコンポーネントにおいて。

      
開発者以外による編集
対応済み
Weglot のダッシュボードで内容を確認・編集してください。

      
言語ごとに1つのURL
まだです
現在、言語情報はクッキーに保存されています。言語ごとのインデックス付きURLが必要になった場合は、next-intl または Paraglide JS をご利用ください。

      
repoファイルとしての翻訳
アクションの翻訳
Weglot GitHub Actions で JSON ロケールファイルを翻訳し、プルリクエストを作成します。ドキュメントを参照 →

      
React 18、Pages Router
対応していません
また、Next.js 14 以前のバージョンも対象です。

      
CMS またはウェブサイトビルダー
このパッケージではありません
あなたのサイトはReactで構築されていません。Weglot のCMS連携機能をご利用ください。

    

  











  

    
// compare

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

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


    
  










  

    
よくあるご質問（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

    

    

      
      APIキーを取得する
    

    
自分でやってみたいですか？ドキュメントを読むか、npmでパッケージを確認してください。