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

user_15501778 0
Viewed 32086

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

I recently added the package and got this error. I have followed all the steps as far as I know.

I use Next.js with the next-i18next package which usually initialises itself automatically.

https://github.com/m2vi/downloader

i18next next.js reactjs
3 Answers

From the next-i18next docs:

Then we add serverSideTranslation to getStaticProps or getServerSideProps (depending on your case) in our page-level components.

Meaning you'll need to add serverSideTranslation to the pages that need translations.

For example in your pages/d/[tab]/index file:

import Head from 'next/head';
import { Input } from '../../../components/Input';
import YouTube from '../../../components/youtube/Main';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

const index = () => {
    return (
        <>
            <Head>
                <title>YouTube</title>
            </Head>
            <YouTube />
        </>
    );
};

export const getServerSideProps = async ({ locale }) => ({
    props: {
        ...(await serverSideTranslations(locale, ['common']))
    }
});

export default index;

Then further down in your Main component you can access the documentation translation using:

t('pages.documentation')
user_18707800

update next-i18next.config.js

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'de', 'fr'],
    },
    react: { useSuspense: false },//this line
};
user_105733070

I had this issue too.

But I had "revalidate" property in getStaticProps. When I removed it, the error went away.

P.S. Maybe this will help someone

user_121211710
Related