Next.js 통합

Lingo.dev 컴파일러는 React 컴포넌트를 수정하지 않고도 빌드 타임 현지화를 제공하기 위해 Next.js 앱 라우터와 원활하게 통합됩니다.

Next.js 애플리케이션에 다국어 지원을 추가하려면 다음 단계를 따르세요.

또는 Next.js 데모 프로젝트를 탐색하여 컴파일러를 실제로 사용해 보세요.

사전 요구사항

앱 라우터가 있는 Next.js 13+
React 18+
Node.js 18 이상

1단계. 패키지 설치

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

npm install lingo.dev

2단계. Next.js 구성

next.config.js에서 컴파일러를 가져오고 구성하세요:

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 기존 Next.js 구성
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
})(nextConfig);

3단계. 인증 설정

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


# .env.local

GROQ_API_KEY=gsk_...

4단계. 프로바이더 추가

루트 레이아웃(app/layout.tsx)에 프로바이더를 가져오세요:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</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:3000을 방문하여 다국어 앱이 작동하는 것을 확인하세요.

구성 옵션

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

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Next.js의 기본값
  lingoDir: "lingo", // 번역 파일 디렉토리
  rsc: true, // React 서버 컴포넌트 지원 활성화
  debug: false, // 디버그 로깅 활성화
})(nextConfig);

서버 및 클라이언트 컴포넌트

Lingo.dev 컴파일러는 서버 및 클라이언트 컴포넌트 모두에서 작동합니다:

서버 컴포넌트

서버 컴포넌트는 빌드 시점에 전체 번역 지원으로 처리됩니다:

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

클라이언트 컴포넌트

클라이언트 컴포넌트는 최적화된 번역 번들을 받습니다:

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

프로덕션 배포

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

번역 파일 커밋:

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

배포 선호하는 플랫폼(Vercel, Netlify 등)을 사용

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