빠른 시작

Lingo.dev 컴파일러는 기존 React 컴포넌트를 변경하지 않고도 빌드 타임에 모든 React 앱을 다국어로 만들 수 있도록 설계되었습니다.

이 빠른 시작 가이드는 5분 이내에 React 앱에 다국어 지원을 추가하는 데 도움이 될 것입니다.

이 가이드를 완료하면 다음과 같은 결과를 얻게 됩니다:

  1. React 앱에 Lingo.dev 컴파일러 설치 및 구성
  2. 자동화된 번역 추출 및 주입 설정
  3. 최적화된 번역이 포함된 작동하는 다국어 앱

시작해 봅시다!

사전 요구 사항

Lingo.dev 컴파일러는 현대적인 React 프레임워크와 함께 작동합니다. 시작하기 전에 다음 지원되는 설정 중 하나가 있는지 확인하세요:

  • Next.js (App Router)
  • React Router / Remix
  • Vite + React

또는 데모 앱을 살펴보세요: Next.js, React Router, Vite.

1단계. 패키지 설치

프로젝트에 lingo.dev 패키지를 설치하세요:

npm install lingo.dev

2단계. 프레임워크 구성

프레임워크를 선택하고 특정 설정을 따르세요:

Next.js

다음과 같이 next.config.js를 업데이트하세요:

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b",
  },
})(nextConfig);

React Router / Remix

다음과 같이 vite.config.ts를 업데이트하세요:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Vite

다음과 같이 vite.config.ts를 업데이트하세요:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

3단계. 인증 설정

Lingo.dev 컴파일러는 AI 기반 번역을 위해 GROQ를 사용합니다. groq.com에서 무료 계정을 만들고 API 키를 받으세요.

환경에 API 키를 추가하세요:


# .env

GROQ_API_KEY=gsk_...

4단계. 프로바이더 추가

앱을 LingoProvider로 감싸서 번역 기능을 활성화하세요:

Next.js

layout.tsx에서:

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

root.tsx에서:

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

main.tsx에서:

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

5단계. 빌드 및 테스트

개발 서버를 실행하세요:

npm run dev

컴파일러가 자동으로 다음 작업을 수행합니다:

  1. React 컴포넌트에서 번역 가능한 텍스트 스캔
  2. 번역 키 추출
  3. AI를 사용하여 번역 생성
  4. lingo/ 디렉토리에 최적화된 번역 파일 생성

이제 앱이 다국어를 지원합니다! 컴파일러는 콘텐츠 변경 사항을 추적하는 버전 관리된 사전을 생성하고 수정된 콘텐츠만 재번역합니다.

선택 사항: 언어 전환기 추가

사용자가 언어를 변경할 수 있도록 언어 전환기를 추가하세요:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

다음 단계