'You will need to pass in an i18next instance by using initReactI18next

I am trying to add translation to my website by default tutorial,

my /pages/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  // want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


export default i18n;

/pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export default function Document(){
  return(
    <Html>
      <Head>
        <body>
          <Main/>
          <NextScript/>
        </body>
      </Head>
    </Html>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'footer'])),
      // Will be passed to the page component as props
    },
  };
}

and navbar with translating string in /component/Navbar.js

import { useTranslation } from 'next-i18next';

const Nav = () => {

    const { t, i18n } = useTranslation('navbar');

    
    return (
        <div>
        {t('home')}
        </div>
    )
}

export default Nav;

/pages/_app.js

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  return (

  <Component {...pageProps} />

  )
}

export default appWithTranslation(MyApp);

but still translating is not working, I was trying to add async function getStaticProps for translation to Navbar component but there was error "Can't resolve 'fs'" - because you have imported serverSideTranslations in some place where client side code is being run

next.js translation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'You will need to pass in an i18next instance by using initReactI18next

Sources

Related Questions