[next-i18next] Error: appWithTranslation was called without a next-i18next config

next-i18next 설정 중

https://github.com/i18next/next-i18next#appwithtranslation
next-i18next github 문서 가이드를 통해 설정을 하고 있었는데,
아래와 같은 오류가 발생했다.

에러

Error: appWithTranslation was called without a next-i18next config

한국어로 번역하자면 밑과 같았다.

appWithTranslation이 next-i18 next config 없이 호출되었습니다. 

가이드에 따르면, 아래와 같이 _app.ts를 HOC로 감싸면 되었는데 이부분에서 문제가 발생한듯 하였다.

import { appWithTranslation } from 'next-i18next'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp)

해결

stackoverflow의 답변을 통해, 위의 코드를 아래와 같이 수정함으로써 해결할 수 있었다.

답변

link

That's the solution that works for me:

• In the _app.js import import i18next.config, like this import NextI18nextConfig from '../../next-i18next.config', this will guarantee that you are loading the configurations.
• Then exported it in the appWithTranslation, like this export default appWithTranslation(App, NextI18nextConfig)

This will override the default config.

해결 코드

import config from '../next-i18next.config';
import { appWithTranslation } from 'next-i18next'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp, config)