AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

i18n With Tolgee

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • React 및 Next.js 13+ 프레임워크를 사용하는 개발자
  • 다국어 지원 기능 구현을 위한 기초 지식을 가진 중급 개발자
  • i18next 대체 도구 탐색 중인 프론트엔드 개발자

핵심 요약

  • Tolgee@tolgee/react 패키지 사용으로 Next.js 13+ 프로젝트에 쉽게 통합 가능
  • useTranslate 훅을 통해 t() 함수로 다국어 텍스트 전환 가능
  • LanguageSwitcher 컴포넌트에서 changeLanguage() 메서드로 언어 전환 구현 가능

섹션별 세부 요약

1. 설치 및 초기 설정

  • npm install @tolgee/react tolgee 명령어로 라이브러리 설치
  • tolgee.ts 파일에서 Tolgee 인스턴스 생성 및 apiUrl, apiKey, availableLanguages 설정
  • .env.local 파일에 NEXT_PUBLIC_TOLGEE_API_URLNEXT_PUBLIC_TOLGEE_API_KEY 환경 변수 설정

2. 앱 전역 감싸기

  • layout.tsx 파일에서 TolgeeProvider로 앱 전체 감싸기
  • tolgee 인스턴스를 TolgeeProvider에 전달하여 전역 상태 관리

3. 텍스트 번역 구현

  • useTranslate 훅 사용 시 t() 함수로 텍스트 번역
  • 예시: t('greeting')으로 'Hello'와 같은 키에 해당하는 번역값 출력

4. 언어 전환기 구현

  • useTolgee 훅으로 changeLanguage()getLanguage() 메서드 접근
  • 요소에서 onChange 이벤트로 언어 변경 처리
  • availableLanguages 배열에 정의된 언어만 전환 가능

결론

  • Tolgee는 i18next 대비 간단한 설정과 실시간 편집 기능을 제공하며, Next-Intl과 결합하면 라우팅 구조와 번역 관리의 최적화가 가능하다. @tolgee/react 패키지 사용 시 useTranslateuseTolgee 훅을 반드시 사용하고, TolgeeProvider로 앱 전역 감싸는 것이 핵심이다.