react-i18next in next.js

next.js 에서 react-i18next 를 적용해 보자!

🎈 서버 단에서 번역을 처리해 주는 next-i18next 도 있지만, 브라우저 단에서 i18next를 수행하고 싶었기에 react-i18next를 사용했다.

yarn add

yarn add i18next i18next-browser-languagedetector react-i18next

init i18next

// config/i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import en from "public/locales/en/lang.json";
import jp from "public/locales/jp/lang.json";
import kr from "public/locales/kr/lang.json";


const resources = {
    en: {
        translation: en.messages.GCS,
    },
    jp: {
        translation: jp.messages.GCS,
    },
    kr: {
        translation: kr.messages.GCS,
    }
};

i18n.use(initReactI18next)
  .use(LanguageDetector)
  .init({
    resources,
    fallbackLng: "kr",
    debug: true,
    interpolation: { escapeValue: true },
    returnObjects: true,
    returnEmptyString: true,
    returnNull: true,
  });
  
  export default i18n;

LanguageDetector를 통해서 브라우저에 부여된 언어 속성을 감지해서 해당 언어로 적용해준다.

 

i18next 사용 하기

// 설정한 값을 불러온다
import i18n from "@config/i18n";

const Home = () => {
  const router = useRouter();
  const {t} = useTranslation();
    useEffect(() => {
        if (router.query['lang'] && typeof router.query.lang === 'string') {
          i18n.changeLanguage(lang);
      }
      document.documentElement.setAttribute("lang", i18n.language);
    }, [])

    return (
    <>
        <p>{t('code!!')}</p>
    </>)
}

나의 경우 localhost:3000/home?lang=jp 이런 식으로 query string 으로 언어를 전달하게 했다.

lang 값이 있으면 그 언어로 changeLanguage를 사용해서 언어를 설정 했으며, 없으면 default 로 "ko" 가 된다.

아래 document.documentElement.setAttribute("lang", i18n.language); 를 통해서 html lang 부분에 값을 부여 했다.

 

LanguageDetector를 사용하면 페이지를 reload해도 언어가 유지 되는데 이는 local storage에 해당 언어를 저장해서 가능해 진다.

개발자 도구에서 local storage에 lang 값이 저장된 것을 볼 수 있다.

이 값을 languageDetector이 감지해서 언어를 적용해 준다.

 

i18next-browser-languagedetector 라이브러리를 좀 더 열어다 보니, local storage 외에도 다른 방법을 사용할 수도 있는 듯 하다 !