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

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를 통해 다국어 적용을 해보신 분이 계시다면
도움 주신다면 감사드리겠습니다 ㅠㅠ…

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

1 Like

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