[solved] react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule 언어팩 설정시 <Trans> 사용시 오류

nextjs 이전 단계에서는 잘만 썼던 i18next를 13버전으로 올렸더니 여러가지 이슈들이 터지기 시작한다..

 

현재 프로젝트 환경에 맞춰서 i18next를 잘 쓰고 있었는데

언어팩 json 에서 html 태그를 사용해야해서 <Trans> 컴포넌트를 이용해야했다.

 

react-i18next 문서를 참고하면서 잘 작성..

https://react.i18next.com/latest/trans-component 

import React from 'react';
import { Trans, useTranslation } from 'react-i18next'

function MyComponent() {
  const { t } = useTranslation('myNamespace');

  return <Trans t={t}>Hello World</Trans>;
}

 

대충 위에 처럼 작성했다. 그런데 에러 발생

react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule

 

뭐가 문젠지 모르겠어서 구글링을 미친듯이 했는데 해결책이 안나왔다.

그러다 nextjs13버전 i18next 적용하는데 참 많은 도움이 됐던 블로그를 다시 찾아봤다.

https://locize.com/blog/next-13-app-dir-i18n/

i18n with Next.js 13 and app directory (an i18next guide)

import { Trans } from 'react-i18next/TransWithoutContext'
import { useTranslation } from '../../../i18n'

export const Footer = async ({ lng }) => {
  const { t } = await useTranslation(lng, 'footer')
  
  return (
    <footer style={{ marginTop: 50 }}>
      <Trans i18nKey="languageSwitcher" t={t}>
        Switch from <strong>{{lng}}</strong> to:
      </Trans>
    </footer>
  )
}

 

i18nKey 값에 언어팩 경로를 전부 입력했었는데, 예시를 보니 string으로 정확한 key값만 넘기게 해놨었다.

위 블로그 예시대로 key값만(string) 넘기려면 경로가 무조건 루트경로에 있어야했다. (이것저것 시도해봤으나 실패..)

 

 

Footer 본문에서 문구를 지워도 언어팩에 들어간 문장 그대로 나온다. 너무 신기하게 잘 돌아간다.. 에러도 더이상 안 뜬다..

만쉐이~!