3

I used the next-i18next module for a multi-language application. I don’t understand why I am getting the following error, as I have declared the namespaces the same way it is shown in the documentation.

The error message:

You have not declared a namespacesRequired array on your page-level component: Home.
This will cause all namespaces to be sent down to the client, possibly negatively impacting the performance of your app.
For more info, see: https://github.com/isaachinman/next-i18next#4-declaring-namespace-dependencies

index.ts

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { withTranslation } from '../i18n'
import { useTranslation } from 'react-i18next';
// import NextI18NextInstance from '../i18n';

function Home({ coursesData }) {
  const { t, i18n } = useTranslation(['common', 'cars']);
  return (
    <>
      <h1>{t('common:indexHeader')}</h1>
      <h2>{t('cars:title')}</h2>
    </>
  )
}

// All works with this code, but I plan to use getServerSideProps()
// Home.getInitialProps = async () => {
//   return {
//     namespacesRequired: ['common', 'courses']
//   }
// }

export default Home

How can I solve the problem?

ib.
  • 27,830
  • 11
  • 80
  • 100
Daniil Kedrov
  • 130
  • 1
  • 4

1 Answers1

3

next-i18next doesn't supports getServerProps yet, therefore you need continue using getInitialProps.

For more info: https://github.com/isaachinman/next-i18next/issues/652

felixmosh
  • 32,615
  • 9
  • 69
  • 88
  • Following the comments in the issue above the problem will be solved with the migration to Next.js 10 at https://github.com/isaachinman/next-i18next/issues/869 – kachar Dec 02 '20 at 15:13
  • Migrating by itself to Next.js 10 won't help, read this comment https://github.com/isaachinman/next-i18next/issues/869#issuecomment-718140408 – felixmosh Dec 02 '20 at 16:09