Nastavení

Alpha

Lingo.dev Compiler je ve fázi alpha. Je nestabilní, nedoporučuje se pro produkční nasazení a API se mezi verzemi může měnit.

Přidejte do své aplikace v Reactu vícejazyčnou podporu za méně než 5 minut.

Požadavky

Node.js 18+ a aplikace v Reactu používající Next.js (App Router) nebo Vite.

Instalace#

bash

pnpm install @lingo.dev/compiler

Nakonfigurujte framework#

Udělejte konfiguraci asynchronní a obalte ji pomocí 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,
    },
  });
}

Přidejte 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>
  );
}

Ověření#

bash

npx lingo.dev@latest login

Tím se pro ověření otevře prohlížeč. Bezplatný tarif Hobby stačí pro většinu projektů.

Pokud je ověření přes prohlížeč blokované, přidejte klíč do .env ručně:

bash

LINGODOTDEV_API_KEY=your_key_here

Spusťte vývojový server#

bash

npm run dev

Compiler projde vaše JSX, vygeneruje pseudopřeklady (okamžité falešné překlady, díky kterým uvidíte, co se bude překládat) a vloží je do komponent. Metadata se ukládají do .lingo/metadata.json – tento soubor potvrďte do správy verzí.

Přidejte přepínač jazyků (nepovinné)#

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

Vygenerujte skutečné překlady#

Až budete připraveni, vypněte pseudopřekladač:

{
  dev: {
    usePseudotranslator: false,
  }
}

Restartujte vývojový server. Compiler vygeneruje skutečné AI překlady pro nový nebo změněný text.

Další kroky#

Jak to funguje

Transformační pipeline při buildu

Next.js

Nastavení a funkce specifické pro Next.js

Vite + React

Nastavení a funkce specifické pro Vite

Configuration Reference

Všechny možnosti konfigurace

Byla tato stránka užitečná?

Alpha

Lingo.dev Compiler je ve fázi alpha. Je nestabilní, nedoporučuje se pro produkční nasazení a API se mezi verzemi může měnit.

Přidejte do své aplikace v Reactu vícejazyčnou podporu za méně než 5 minut.

Požadavky

Node.js 18+ a aplikace v Reactu používající Next.js (App Router) nebo Vite.

Instalace#

bash

pnpm install @lingo.dev/compiler

Nakonfigurujte framework#

Udělejte konfiguraci asynchronní a obalte ji pomocí 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,
    },
  });
}

Přidejte 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>
  );
}

Ověření#

bash

npx lingo.dev@latest login

Tím se pro ověření otevře prohlížeč. Bezplatný tarif Hobby stačí pro většinu projektů.

Pokud je ověření přes prohlížeč blokované, přidejte klíč do .env ručně:

bash

LINGODOTDEV_API_KEY=your_key_here

Spusťte vývojový server#

bash

npm run dev

Přidejte přepínač jazyků (nepovinné)#

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

Vygenerujte skutečné překlady#

Až budete připraveni, vypněte pseudopřekladač:

{
  dev: {
    usePseudotranslator: false,
  }
}

Restartujte vývojový server. Compiler vygeneruje skutečné AI překlady pro nový nebo změněný text.

Další kroky#

Jak to funguje

Transformační pipeline při buildu

Next.js

Nastavení a funkce specifické pro Next.js

Vite + React

Nastavení a funkce specifické pro Vite

Configuration Reference

Všechny možnosti konfigurace