문제

개발환경에서는 잘 되던 페이지가 vercel에 배포를 하고나니 다음과 같은 메시지를 띄우며 보여주지 않았다.

원인을 찾다 찾다.. 몇시간만에 겨우 발견했다.

원인

react-i18next 라이브러리를 사용하여 다국어를 구현하였는데, 내 환경은 NextJS였고 서버사이드 렌더링시 추가 라이브러리를 설치하고, import를 다르게 해와야 했다..

NextJS에서 사용하기 위해서는 다음 패키지를 설치하고 매뉴얼을 따르면 된다..

https://www.npmjs.com/package/next-i18next

해결

패키지 설치

yarn add next-i18next react-i18next i18next

config

루트 폴더에 next-i18next.config.js 파일을 추가한다.

/** @type {import('next-i18next').UserConfig} */
const path = require('path')

module.exports = {
  i18n: {
    defaultLocale: 'ko',
    backend: {
      // i18next-http-backend options
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    locales: ['ko', 'ja', 'zh', 'en'],
    localePath: path.resolve('./public/locales'),
    localeStructure: '{{lng}}/{{ns}}',
  },
};

그 후 next.config.js에도 추가해준다.

const { i18n } = require('./next-i18next.config')

const nextConfig = {
  i18n,
  // ...
}

import 변경

기존에는 react-i18next에서 패키지를 가져오고 있었는데 전부 next-i18next에서 가져오는 것으로 수정한다. 예를 들어, 다음과 같이 수정한다.

// import { useTranslation } from 'react-i18next' << 제거!!
import { useTranslation } from 'next-i18next'

sever side props 추가

i18n을 사용하는 모든 페이지에서 props로 serverSideTranslations라는 것을 넘겨줘야 한다.

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export const getServerSideProps: GetServerSideProps = async ({query}) => {
  const { lang = 'ko' } = query;

  return {
    props: {
      ...(await serverSideTranslations('ko', [
        'common',
      ])),
    },
  };
};

getServerSideProps를 따로 작성하지 않은 페이지들도 이를 위해 전부 설정을 해줘야 한다.

_app.tsx 수정

마지막으로 i18n을 사용하는 루트 컴포넌트를 appWithTranslation 라는 함수로 감싸줘야 한다.

import { appWithTranslation } from 'next-i18next'

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const App = ({ Component, pageProps }: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? (page => page);
  return (
    <ErrorBoundary FallbackComponent={Fallback}>
    // ....
    </ErrorBoundary>

  );
}

export default appWithTranslation(App); // 감싸주기!!!