@weglot/translate-react

다음 내용을 번역해 주세요:
React, Next.js 또는 Vite 앱

t() 래퍼도, JSON 파일도 필요 없습니다. 빌드 플러그인과 Weglot API 키를 추가하기만 하면, 앱이 빌드될 때 JSX 내의 텍스트가 번역되며, 팀원들은 코드를 건드리지 않고도 Weglot 에서 번역 내용을 편집할 수 있습니다.

API 키를 발급받으세요

다음 프롬프트를 복사하세요. · · · 문서를 읽어보세요 · npm에서 보기

// what your users see

여러분이 작성한 JSX, 모든 언어에서

텍스트를 한 번만 작성하세요. Weglot 에서 빌드 시점에 번역해 줍니다.

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

하나의 버튼으로 5개 언어를 지원합니다. 너비는 실시간으로 측정됩니다.

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

키도, t()도 필요 없습니다. JSX로 텍스트를 작성하기만 하면 됩니다. 그게 전부입니다.

0더하기 연산을 위한 t() 호출
0유지 관리해야 할 번역 파일
1npm install
2코드 수정: 플러그인 및 프로바이더

// how it works

네 단계. 구성 요소는 그대로 유지됩니다.

원문과 대상 언어는 코드가 아닌 ‘ Weglot ’ 프로젝트에서 가져옵니다. 이 플러그인은 빌드 시점에 JSX 내의 텍스트를 읽어와 해당 번역을 가져옵니다.

  1. 패키지를 설치하고 API 키를 추가하세요

    Weglot 2.0 프로젝트를 생성한 다음, 프로젝트 설정에서 API 키를 복사하세요. API 키는 다음과 같이 시작합니다. pk_. 계속 .env 버전 관리 시스템에서 제외됨.

    터미널 · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. 플러그인 추가하기

    Next.js 구성을 다음 코드로 감싸세요. withWeglot. 포인트 sourceRoot 페이지와 컴포넌트가 들어 있는 폴더로.

    next.config.ts
    import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

  3. 제공자 추가하기

    루트 레이아웃을 다음으로 감싸세요. WeglotProvider Next.js의 진입점에서 호출되도록 하여, 언어를 변경하면 서버 컴포넌트가 새로고침되도록 합니다.

    app/layout.tsx
    import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

  4. 프로젝트의 모든 언어로 빌드하고 배포하세요

    각 빌드에서는 Weglot 에서 누락된 번역 내용을 가져와 다음을 기록합니다. public/translations/<locale>.json. 그 폴더는 무시하세요. 다음 코드를 사용하여 언어 선택기를 추가하세요. LocaleSwitcher 또는 useWeglotContext.

    .gitignore
    public/translations/

// under the hood

만들면 어떻게 될까요?

  1. 01 JSX를 읽습니다
  2. 02새로운 문자 보내기
  3. 03Weglot 번역
  4. 04 언어당 하나의 파일을 작성합니다

// every language of your project

한 번의 빌드로 모든 언어를 추가할 수 있습니다

Weglot 에서 언어를 선택하세요. 다음 빌드에 해당 언어가 포함됩니다.

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Weglot 에서 언어를 추가한 다음 빌드하세요. 번역 파일은 앱과 함께 배포됩니다.

// built for coding agents

담당자가 이를 설정해 드립니다

재작성해야 할 코드가 없으므로 변경 사항이 적고 검토하기 쉽습니다.

어떤 코딩 에이전트든 상관없습니다. 이미 사용 중인 에이전트에 프롬프트 하나를 붙여넣으세요.

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

Docs 에이전트가 읽을 수 있는 형식입니다. llms.txt 인덱스와 각 페이지별 마크다운 파일입니다.

✓패키지를 설치합니다package.json
✓플러그인을 추가합니다next.config.ts
✓프로바이더를 추가합니다layout.tsx
✓생성된 파일을 무시합니다.gitignore
?API 키 입력을 요청합니다.env

검토할 수 있는 diff 파일입니다. 재작성된 줄은 없습니다.

클로드 코드에 붙여넣기

      

      
      
      
    

  

        

        
프롬프트를 복사하세요. 시작 가이드와 동일한 단계입니다.

      

    

  










  

    
// what gets translated

    
이 플러그인은 코드에 포함된 텍스트를 식별할 수 있습니다.

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
텍스트가 번역되었습니다. JSX 텍스트, 리터럴, 상수, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
코드는 그대로 둡니다. 클래스 이름, URL, 로직 등 모두 그대로입니다.

      
translate="no"
선택은 여러분에게 달려 있습니다. 요소를 있는 그대로 유지하거나, data-weglot-skip을 사용하세요.

    

  











  

    
// for your team

    
코드를 건드리지 않고 편집 및 검토하기

    

      

      

        
my-next-app › 독일어검토할 항목 2개

        
출처독일어상태

        
Save changesÄnderungen speichern검토됨

        
Start your free trialKostenlos testen편집

        
Cancel anytime.Jederzeit kündbar.복습하기

        
Choose your planWählen Sie Ihren Tarif복습하기

      

      
Weglot 에 실린 리뷰. 제품, 마케팅 및 번역 담당자가 문구를 수정합니다.

      
Edit saved · Kostenlos testen
No code change
단어 하나를 수정하기 위한 풀 리퀘스트는 제출하지 마세요.

      
검토한 내용을 추적하세요. 각 언어별 진행 상황을 확인하세요.

    

  









  

    
// fit

    
Weglot 를 사용할 때와 사용하지 말아야 할 때

    
이 패키지는 현재 미리보기 단계에 있습니다. 현재 이 패키지가 어떤 위치에 있는지 살펴보겠습니다.

    

      
Next.js 앱 라우터
지원
Next.js 15 또는 16.0.4 이상, React 19.

      
Vite
지원
React 19, Node 20.9 이상. Webpack도 작동합니다.

      
React 서버 컴포넌트
지원
언어를 변경하면 서버 구성 요소가 새로 고쳐집니다.

      
CMS 및 API 콘텐츠
지원
~와 함께 tDynamic Next.js 서버 컴포넌트에서.

      
개발자가 아닌 사용자의 편집
지원
Weglot 대시보드에서 검토하고 편집하세요.

      
언어당 하나의 URL
아직 아닙니다
현재 언어는 쿠키에 저장되어 있습니다. 이제 언어별로 색인된 URL이 필요합니다: next-intl 또는 Paraglide JS를 사용하세요.

      
리포지토리 파일 형태의 번역본
번역 작업
Weglot GitHub Actions에서 JSON 로케일 파일을 번역하고 풀 리퀘스트를 생성합니다. 문서 참조 →

      
React 18, Pages 라우터
지원되지 않음
또한 Next.js 14 이하 버전도 지원합니다.

      
CMS 또는 웹사이트 제작 도구
이 패키지가 아닙니다
귀하의 사이트는 React로 구축되지 않았습니다. Weglot 의 CMS 연동 기능을 사용해 보세요.

    

  











  

    
// compare

    
왜 기존의 i18n 라이브러리를 사용하지 않는 걸까요?

    
i18n 라이브러리는 모든 문자열을 키로 대체하고 언어별로 하나의 파일을 유지하도록 요구합니다. Weglot 는 사용자가 이미 작성한 문자열을 읽어옵니다. 다음은 두 옵션의 비교입니다.


    
  










  

    
자주 묻는 질문

    

      

        
SEO를 지원하나요? 언어별로 하나의 URL을 제공하고 hreflang을 지원하나요?

        

          
오늘은 아닙니다. 방문자의 언어는 쿠키에 저장되며, 모든 언어가 동일한 URL에서 제공되므로 검색 엔진은 원본 언어만 색인화합니다.

          
다음과 같이 페이지 제목과 설명을 번역할 수 있습니다. tDynamicAll 에서 generateMetadata. 지금 당장 언어별로 색인된 URL이 필요하다면, next-intl이나 Paraglide JS와 같이 로케일 라우팅 기능을 지원하는 라이브러리를 사용하세요.

        

      

      

        
CMS, API 또는 사용자가 제공하는 동적 콘텐츠를 어떻게 번역하나요?

        

          
이 플러그인은 코드 내에 작성된 텍스트만 번역합니다. 코드에서 전혀 처리하지 않는 콘텐츠의 경우, 다음을 호출하십시오. tDynamic, tDynamicAll 또는 tDynamicHtml 출처: @weglot/translate-react/dynamic Next.js 서버 컴포넌트에서.

          
API 처리 시간이 500ms를 초과하거나, 특정 텍스트에 대한 요청이 처음 이루어지는 경우, 원본 텍스트를 반환합니다. 번역 결과는 이후 요청 시 제공됩니다. 데이터를 직접 캐시하는 경우, 캐시를 방문자의 언어에 따라 다르게 설정해야 합니다.

        

      

      

        
Next.js와 Vite: 무엇이 달라지나요?

        

          
Next.js는 다음을 사용합니다. withWeglot 출처: @weglot/translate-react/next 그리고 WeglotProvider 출처: @weglot/translate-react/react/next. Vite는 weglotPlugin 출처: @weglot/translate-react/vite 그리고 WeglotProvider 출처: @weglot/translate-react/react. Webpack은 weglotPlugin 출처: @weglot/translate-react/webpack.

          
동적 콘텐츠 기능은 Next.js 서버 컴포넌트에서만 실행됩니다.

        

      

      

        
React 서버 컴포넌트와 호환되나요?

        
네, Next.js 앱 라우터를 사용하면 됩니다. 가져오기 WeglotProvider 출처: @weglot/translate-react/react/next 이를 통해 언어를 변경하면 서버 구성 요소가 새로 고쳐집니다. tDynamic, tDynamicAll 그리고 tDynamicHtml 서버 측에서, 서버 구성 요소 내에서 실행됩니다.

      

      

        
빌드하면 어떻게 되나요?

        

          
이 플러그인은 다음 위치의 JSX에서 텍스트를 찾습니다. sourceRoot 그리고 Weglot API에 누락된 번역 내용을 요청합니다. Weglot 는 LLM을 통해 번역문을 생성하며, 빌드 과정은 최대 translationTimeout (기본값은 300초입니다). 그런 다음 다음 내용을 기록합니다. public/translations/<locale>.json.

          
번역에 실패하면 빌드가 실패하고, 수신한 내용을 로컬 캐시에 저장합니다. 계속 진행하려면 다시 빌드하십시오. buildMode: "cache-only", 이 빌드는 네트워크 호출을 수행하지 않습니다.

        

      

      

        
번역본은 어디에 저장되어 있나요?

        
Weglot 프로젝트에서 해당 내용을 검토하고 편집할 수 있습니다. 또한 각 빌드에서는 수신한 번역 내용을 <sourceRoot>/weglot/cache/<locale>.json. API를 호출하지 않고 해당 폴더를 빌드에 포함시키거나, 무시하십시오. public/translations/ 생성되어 다음으로 이동합니다 .gitignore.

      

      

        
어떤 내용이 번역되며, 특정 내용을 제외하려면 어떻게 해야 하나요?

        
JSX 내의 텍스트, JSX 표현식 내의 문자열 리터럴, 상수에서 읽어온 문자열, 그리고 다음과 같은 속성들: title, alt, placeholder 그리고 aria-label. JSX 외부의 코드, URL, 클래스 이름 및 문자열은 변경되지 않습니다. 추가 translate="no" 또는 data-weglot-skip 요소를 원본 언어로 유지하려면. 다음을 사용하여 사용자 정의 텍스트 속성을 선언하세요. translatableAttributes.

      

    

  







  

    
React 앱을 다시 작성하지 않고도 다국어 지원이 가능하게 만드세요

    
패키지를 설치하고, API 키를 추가한 다음 빌드하세요.

    

      
터미널

      
$ npm install @weglot/translate-react

    

    

      
      API 키를 발급받으세요
    

    
직접 해보고 싶으신가요? 문서를 읽어보거나 npm에서 패키지를 확인해 보세요.