핵심 요약
데브시스터즈는 GatsbyJS를 활용해 다국어(l10n) 페이지를 자동 생성하고, 브라우저 언어에 따라 루트 경로를 각 언어 페이지로 자동 리다이렉트하는 구현을 완성했습니다.
구현 방법
- TranslationData 타입과 ko/en/ja 데이터 파일로 번역 데이터를 구성하고 Gatsby Node API로 TranslationData 노드를 생성합니다.
- createSchemaCustomization, sourceNodes를 사용해 TranslationData 스키마를 정의하고 GraphQL 노드로 노출합니다.
- createPages에서 TranslationData를 조회해 language별 페이지(/ko, /en, /ja)를 생성하고 템플릿과 context를 연결합니다.
- 루트 경로 방문 시 브라우저 언어를 감지해 useLanguageNavigateEffect로 대상 페이지로 이동합니다.
- 페이지 템플릿과 페이지 쿼리를 통해 language를 표시하고 번역 데이터를 활용합니다.
주요 결과
- /ko, /en, /ja 경로의 페이지가 생성되고 정상적으로 렌더링됩니다.
- 루트(/) 접근 시 브라우저 설정에 맞는 언어 페이지로 자동 리다이렉트됩니다.
- allTranslationData 노드를 이용한 GraphQL 조회로 번역 데이터의 접근성이 보장됩니다.
