React Router / Remix 통합

Lingo.dev 컴파일러는 React Router 및 최신 Remix(현재 React Router v7)와 원활하게 작동하여 빌드 타임 현지화를 제공합니다.

React Router 또는 Remix 애플리케이션에 다국어 지원을 추가하려면 다음 단계를 따르세요.

사전 요구 사항

React Router v6+ 또는 Remix
빌드 도구로 Vite 사용
React 18+
Node.js 18 이상

1단계. 패키지 설치

lingo.dev 패키지를 설치하세요:

npm install lingo.dev

2단계. Vite 구성

컴파일러를 vite.config.ts에 가져오고 구성하세요:

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // 기존 Vite 구성
};

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

3단계. 인증 설정

groq.com에서 무료 계정을 만들고 API 키를 추가하세요:


# .env

GROQ_API_KEY=gsk_...

4단계. 프로바이더 추가

React Router용

루트 컴포넌트(app/root.tsx)에서 프로바이더를 가져오세요:

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

// React Router와 데이터 로더 사용 시
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Remix용

루트 라우트(app/root.tsx)에서 프로바이더를 가져오세요:

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

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

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

5단계. 선택 사항: 로케일 전환기 추가

언어 전환기 컴포넌트 생성:

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

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

6단계. 빌드 및 테스트

개발 서버 시작:

npm run dev

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

React 컴포넌트에서 번역 가능한 콘텐츠 스캔
번역 키 추출
AI 기반 번역 생성
lingo/ 디렉토리에 최적화된 번역 파일 생성

http://localhost:5173에 접속하여 다국어 앱이 작동하는 것을 확인하세요.

구성 옵션

컴파일러 동작을 사용자 정의할 수 있습니다:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

서버 사이드 렌더링

컴파일러는 클라이언트 사이드 및 서버 사이드 렌더링 모두에서 작동합니다:

클라이언트 컴포넌트

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

라우트 컴포넌트

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

프로덕션 배포

애플리케이션 빌드:
```
npm run build
```

번역 파일 커밋:

git add lingo/
git commit -m "Add translations"

선호하는 플랫폼을 사용하여 배포

React Router 또는 Remix 앱은 사용자 환경 설정 또는 URL 패턴에 따라 자동으로 현지화된 콘텐츠를 제공합니다.