title: You will need to pass in an i18next instance by using initReactI18next
body: <p>I am trying to add translation to my website by default tutorial,</p>
  <p>my /pages/i18n.js</p>
  <pre><code>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 -&gt; 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? =&gt; 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;
  </code></pre>
  <p>/pages/_document.js</p>
  <pre><code>import { Html, Head, Main, NextScript } from 'next/document';
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
  export default function Document(){
    return(
      &lt;Html&gt;
        &lt;Head&gt;
          &lt;body&gt;
            &lt;Main/&gt;
            &lt;NextScript/&gt;
          &lt;/body&gt;
        &lt;/Head&gt;
      &lt;/Html&gt;
    );
  }
  
  export async function getStaticProps({ locale }) {
    return {
      props: {
        ...(await serverSideTranslations(locale, ['common', 'footer'])),
        // Will be passed to the page component as props
      },
    };
  }
  </code></pre>
  <p>and navbar with translating string in /component/Navbar.js</p>
  <pre><code>import { useTranslation } from 'next-i18next';
  
  const Nav = () =&gt; {
  
      const { t, i18n } = useTranslation('navbar');
  
      
      return (
          &lt;div&gt;
          {t('home')}
          &lt;/div&gt;
      )
  }
  
  export default Nav;
  </code></pre>
  <p>/pages/_app.js</p>
  <pre><code>import { appWithTranslation } from 'next-i18next';
  
  function MyApp({ Component, pageProps }) {
    return (
  
    &lt;Component {...pageProps} /&gt;
  
    )
  }
  
  export default appWithTranslation(MyApp);
  </code></pre>
  <p>but still translating is not working, I was trying to add async function getStaticProps for translation to Navbar component but there was error &quot;Can't resolve 'fs'&quot; - because you have imported serverSideTranslations in some place where client side code is being run</p>