설정 · Lingo.dev

알파

Lingo.dev Compiler는 현재 알파 단계입니다. 안정적이지 않으며 프로덕션 환경에서의 사용은 권장되지 않고, 릴리스마다 API가 변경될 수 있습니다.

5분 안에 React 애플리케이션에 다국어 지원을 추가하세요.

사전 요구 사항

Node.js 18+와 Next.js(App Router) 또는 Vite를 사용하는 React 애플리케이션이 필요합니다.

설치#

bash

pnpm install @lingo.dev/compiler

프레임워크 설정하기#

config를 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/cli login

인증을 위해 브라우저가 열립니다. 무료 Hobby 요금제로도 대부분의 프로젝트에 충분합니다.

브라우저 인증이 차단된 경우, 키를 .env에 직접 추가하세요:

bash

LINGODOTDEV_API_KEY=your_key_here

개발 서버 실행하기#

bash

npm run dev

Compiler는 JSX를 스캔하고, 무엇이 번역되는지 시각적으로 확인할 수 있도록 pseudotranslations(즉시 생성되는 테스트용 번역)를 만든 뒤, 이를 컴포넌트에 주입합니다. 메타데이터는 .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>
  );
}

실제 번역 생성하기#

준비가 되면 pseudotranslator를 비활성화하세요:

{
  dev: {
    usePseudotranslator: false,
  }
}

개발 서버를 다시 시작하세요. Compiler가 새로 추가되거나 변경된 텍스트에 대해 실제 AI 번역을 생성합니다.

다음 단계#