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_URL
및NEXT_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
패키지 사용 시useTranslate
및useTolgee
훅을 반드시 사용하고,TolgeeProvider
로 앱 전역 감싸는 것이 핵심이다.