セットアップ

アルファ

Lingo.dev Compilerはアルファ版です。動作は不安定で、本番環境での利用は推奨されません。リリースごとにAPIが変更される可能性があります。

5分以内でReactアプリに多言語対応を追加できます。

前提条件

Node.js 18以上と、Next.js（App Router）またはViteを使用したReactアプリケーションが必要です。

インストール#

bash

pnpm install @lingo.dev/compiler

フレームワークを設定する#

設定をasyncにし、withLingoでラップします。

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

LingoProviderを追加する#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

認証#

bash

npx lingo.dev@latest login

ブラウザが開き、認証を行います。無料のHobbyプランで、ほとんどのプロジェクトに対応できます。

ブラウザ認証がブロックされる場合は、キーを.envに手動で追加してください。

bash

LINGODOTDEV_API_KEY=your_key_here

開発サーバーを起動する#

bash

npm run dev

CompilerはJSXをスキャンし、疑似翻訳（どの部分が翻訳されるかを可視化するための、即座に生成されるダミー翻訳）を生成してコンポーネントに注入します。メタデータは.lingo/metadata.jsonに保存されるため、バージョン管理にコミットしてください。

言語切り替えを追加する（任意）#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

実際の翻訳を生成する#

準備ができたら、疑似翻訳を無効にします。

{
  dev: {
    usePseudotranslator: false,
  }
}

開発サーバーを再起動してください。Compilerが、新規または変更されたテキストに対して実際のAI翻訳を生成します。

次のステップ#

このページは役に立ちましたか？

アルファ

Lingo.dev Compilerはアルファ版です。動作は不安定で、本番環境での利用は推奨されません。リリースごとにAPIが変更される可能性があります。

5分以内でReactアプリに多言語対応を追加できます。

前提条件

Node.js 18以上と、Next.js（App Router）またはViteを使用したReactアプリケーションが必要です。

インストール#

bash

pnpm install @lingo.dev/compiler

フレームワークを設定する#

設定をasyncにし、withLingoでラップします。

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

LingoProviderを追加する#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

認証#

bash

npx lingo.dev@latest login

ブラウザが開き、認証を行います。無料のHobbyプランで、ほとんどのプロジェクトに対応できます。

ブラウザ認証がブロックされる場合は、キーを.envに手動で追加してください。

bash

LINGODOTDEV_API_KEY=your_key_here

開発サーバーを起動する#

bash

npm run dev

言語切り替えを追加する（任意）#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

実際の翻訳を生成する#

準備ができたら、疑似翻訳を無効にします。

{
  dev: {
    usePseudotranslator: false,
  }
}

開発サーバーを再起動してください。Compilerが、新規または変更されたテキストに対して実際のAI翻訳を生成します。

次のステップ#