(React) Next.js 에 i18n 적용하기

** 참고

Next.js 로 만든 프로젝트에 다국어 설정 끼얹기

(React) Next.js 로 만든 프로젝트에 다국어 설정 끼얹기

https://f-dever-error-log.tistory.com/26

[NextJS] 넥스트 10+버전 i18n 국제화모듈 사용하기 with next-translate

https://blog.borachoi.dev/blog/project/mitt

Next.js에서 다국어를 지원해보자 (feat. 나의 아이돌 타입 테스트,next-i18next)

 

 

** 마주한 오류

error - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:34:0
Module not found: Can't resolve 'fs'

참고 문서 : Module not found: Can't resolve 'fs' 오류 해결

[Next.js] Module not found: Can't resolve 'fs' 오류 해결

---

⁉️ Module not found: Can't resolve 'react-i18n'

-> next-i18n 을 사용하기 위해 필요한 라이브러리 전부 설치

npm i i18next i18next-http-backend i18next-browser-languagedetector react-i18next --save

 

---

 

참고 문서들이 많아서 잘 따라가기만 하면 적용은 금방 가능하다. 단지 기존에 있던 언어 작업들을 정리하고 그에 맞춰서 라이브러리 적용을 하려니까 조금 헤매게 되었다. 과정은 다음과 같다.

 

1. next-i18next.config.js 와 next.config.js 파일

next.config.js 는 이미 설정되어있는 next 관련 파일이고, next-i18next.config.js 는 i18next 사용을 위해 (특히 next ssr 용으로) 새로 만들어야 하는 파일이다.

module.exports = {
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
  },
};

위와 같은 설정을 두 개의 파일에서 해줘야 하는데, 한 쪽에만 하려면 next.config.js 에서 next-i18next.config.js 를 import 해준다.

 

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
    ... ,
    i18n,
}

 

2. 페이지에 적용하기

next-18next 는 ssr 을 지원한다는 ? .. 혹은 ssr 을 사용하는 next 앱을 위해 권장된다고 하는 말을 봐서 일단 사용하기로 한 건데, 적용이 잘 안 됐다. 특히나 앞서 이미 seo 를 위해 meta tag 설정 시 getServerSideProps 를 사용해서 header 의 'accept-language' lang(언어) 값을 가져오고 있어서 그 부분도 고려해야했다.

 

그래서 일단은 전부 다 제거하는 작업은 리스크가 따를 것 같아서 기존에 있는 코드에 추가하는 방법을 취했다.

export const getServerSideProps: GetServerSideProps = async context => {
  const lang = await getLanguageSSR(context.req.headers['accept-language']);
  const user = await getUserDataSSR(context);

...


  return {
    props: {
      ...(await serverSideTranslations(lang, ['common', 'landing'])), // 추가된 부분
      lang: lang,
    },
  };
};

참고 문서들을 보면 getStaticProps 를 통해 locales 이라는 언어 정보를 가져오지만 이미 ssr 방식으로 언어 값을 갖고 있으므로 굳이 locales 이란 값을 새롭게 만들지 않고 lang 을 그대로 사용했다.

 

다만 ssr 방식이 없는 _app.tsx 에서는 getStaticProps 를 아래와 같이 추가했다.

// _app.tsx

export const getStaticProps: GetStaticProps = async ({ locale }: any) => {
  return { props: { ...(await serverSideTranslations(locale, ['common', 'landing'])) } };
};

 

3. i18n 의 언어값 확인하기

i18n 이 ko 를 바라보고 있는지 en 을 바라보고 있는지 체크하기 위해서는 i18n 에 내장된 language 값을 체크한다.

해당 값을 클릭을 통해 변경하고 싶으면 이 또한 i18n 에 내장된 changeLanguage 를 사용한다.

// 예시
i18n.changeLanguage(lan === 'KR' ? 'ko' : 'en');

{i18n?.language}