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

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


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')


update next-i18next.config.js

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