react-i18next를 활용한 번역 적용과 url 관리에 관한 질문입니다.

React
1

react-i18next라는 라이브러리를 사용해 회사 웹페이지에 국제화 적용 작업중에 있는데,
아직 배포는 하지 않은 개발중인 시점입니다.
현재 골머리를 썩고있는것이, 언어 선택을 통한 changelanguage 함수를 사용하여 url 및 텍스트 번역 적용은
잘 동작하고 이상한 점이 없는데, 문제는 첫 렌더시입니다.

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

import en from './en.json';
import ko from './ko.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translations: en,
      },
      ko: {
        translations: ko,
      },
    },
    fallbackLng: ['en', 'ko'],
    debug: true,
    ns: ['translations'],
    defaultNS: 'translations',

    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

현재 작성한 i18n.js 파일은 위와 같습니다.

한국어와 영어 두 언어만을 지원하며( 추후에 추가될 가능성도 있습니다.)
기본 도메인으로 접속했을 때 영어 페이지를 연결하고 언어 선택을 통해 한국어를 선택했을 때
/ko 와 같은 하위 디렉토리로 라우팅시켜 페이지 내비게이션을 적용하려고 하는데요.
다시 말해서 언어 선택에 따라 영어일시에는 루트디렉토리(www.company.com/about) 한국어일시에는
(www.company.com/ko/about)과 같은 방식으로 관리하고자 하는데
이게 개발단에서 가능한건지, 아니면 배포 후 SEO작업을 할때 설정을 해줘야 하는건지 도무지 감이 안잡혀서요.
18next 라이브러리에서 기본 언어를 설정할 수 있는 방법이 있는지, 있다면 어떻게해야하는지 아무리 서치를 해도
잘 모르겠습니다… i18next를 통해 다국어 적용을 해보신 분이 계시다면
도움 주신다면 감사드리겠습니다 ㅠㅠ…

2

음 언어선택시에 이벤트로 라우팅하시면 될거같은데요
아니면 현재 i18next 에 init 되어있는 언어를 가지고 조건식으로 분기하셔도 될 듯 합니다 ^^

1개의 좋아요
3

아… 죄송하지만 조금 풀어서 설명해주실 수 있을까요? 처음 써보는거라 명확하게 이해가 잘 안됩니다 죄송합니다 ㅠㅠ

4

안녕하세요. 저도 현재 해당라이브러리 적용하고 있는 중이어서 전문적이진 못하지만 제가 아는 것을 말씀드리겠습니다.

기본 도메인으로 접속 했을 때 영어 페이지로 연결하는 거는 i18n.init에 lng라는 key값을 'en’으로 설정하시면 초기 언어세팅이 영어로 되어서 원하시는 동작대로 될 것 같습니다. 아니면 기본 도메인이 렌더되는 시점을 잡아 changeLanguage(‘en’)으로 변경해도 될 것 같구요.

한국어로 언어 변경시에 하위 디렉토리로 라우팅 시키는 것은 개발자님께서 언어변경을 어떤 방법으로 하시는지는 모르겠지만 특정 위젯에 onClick 함수에 changeLanguage()를 적용해서 사용하시겠죠? 다양한 방법이 있겠지만 간단한 방법으로는 window.location.href="www.company.com/about"를 영어를 선택할경우 넣어주고 window.location.href="www.company.com/ko/about"를 한국어일 경우 넣어주면 가능 할 것 같습니다.