Configuração

Alfa

O Lingo.dev Compiler está em alfa. É instável, não é recomendado para produção e as APIs podem mudar entre versões.

Adicione suporte multilingue à sua aplicação React em menos de 5 minutos.

Pré-requisitos

Node.js 18+ e uma aplicação React com Next.js (App Router) ou Vite.

Instalar#

bash

pnpm install @lingo.dev/compiler

Configure a framework#

Torne a sua configuração assíncrona e envolva-a com 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,
    },
  });
}

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

Autenticação#

bash

npx lingo.dev@latest login

Isto abre o navegador para autenticação. O plano Hobby gratuito é suficiente para a maioria dos projetos.

Se a autenticação no navegador estiver bloqueada, adicione a chave a .env manualmente:

bash

LINGODOTDEV_API_KEY=your_key_here

Executar o servidor de desenvolvimento#

bash

npm run dev

O Compiler analisa o seu JSX, gera pseudotraduções (traduções fictícias instantâneas para visualizar o que está a ser traduzido) e injeta-as nos seus componentes. Os metadados são armazenados em .lingo/metadata.json — faça commit deste ficheiro no controlo de versões.

Adicionar um seletor de idioma (opcional)#

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

Gerar traduções reais#

Quando estiver tudo pronto, desative o pseudotradutor:

{
  dev: {
    usePseudotranslator: false,
  }
}

Reinicie o servidor de desenvolvimento. O Compiler gera traduções reais com IA para texto novo ou alterado.

Próximos passos#

Como funciona

O pipeline de transformação em tempo de compilação

Next.js

Configuração e funcionalidades específicas do Next.js

Vite + React

Configuração e funcionalidades específicas do Vite

Referência de Configuração

Todas as opções de configuração

Esta página foi útil?

Alfa

O Lingo.dev Compiler está em alfa. É instável, não é recomendado para produção e as APIs podem mudar entre versões.

Adicione suporte multilingue à sua aplicação React em menos de 5 minutos.

Pré-requisitos

Node.js 18+ e uma aplicação React com Next.js (App Router) ou Vite.

Instalar#

bash

pnpm install @lingo.dev/compiler

Configure a framework#

Torne a sua configuração assíncrona e envolva-a com 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,
    },
  });
}

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

Autenticação#

bash

npx lingo.dev@latest login

Isto abre o navegador para autenticação. O plano Hobby gratuito é suficiente para a maioria dos projetos.

Se a autenticação no navegador estiver bloqueada, adicione a chave a .env manualmente:

bash

LINGODOTDEV_API_KEY=your_key_here

Executar o servidor de desenvolvimento#

bash

npm run dev

Adicionar um seletor de idioma (opcional)#

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

Gerar traduções reais#

Quando estiver tudo pronto, desative o pseudotradutor:

{
  dev: {
    usePseudotranslator: false,
  }
}

Reinicie o servidor de desenvolvimento. O Compiler gera traduções reais com IA para texto novo ou alterado.

Próximos passos#

Como funciona

O pipeline de transformação em tempo de compilação

Next.js

Configuração e funcionalidades específicas do Next.js

Vite + React

Configuração e funcionalidades específicas do Vite

Referência de Configuração

Todas as opções de configuração