0

I have setup next-18next with my NextJS and React project, the translation works perfectly in my project.

But I keep having the famous following warning :

You have not declared a namespacesRequired array on your page-level component: withI18nextTranslation(Index). 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

I have declared namespacesRequired in each of my page level component (except 404 page because I have read on the doc that you can't)

BUT :

  • I only have functionnal component so I used both getStaticProps and withTranslation.

  • I have read that sometimes this can happened if you don't have a favicon.ico but I have one (it appears in the tab).

No idea where to look at now... Here is the code of my page that trigger the warning

import React from "react";
import IndexView from "../shared/views/index/index"
import i18nextInstance from "../i18n"

function Index() {
  return (
    <IndexView />
  );
};

Index.getInitialProps = async () => ({
  namespacesRequired: ["common"]
})

export default i18nextInstance.withTranslation("common")(Index);

Here is my i18n config.

import NextI18Next from "next-i18next"

const nextI18next = new NextI18Next({
    defaultLanguage: "en",
    otherLanguages: ['fr'],
     localeSubpaths: {
          en: 'en',
          fr: 'fr'
      },
    fallbackLng: "en",
    serverLanguageDetection: false,
    browserLanguageDetection: false,
    detection: {
        // check if language is cached in cookies, if not check local storage
        order: ["cookie", "localStorage"],

        // next-i18next by default searches for the "next-i18next" cookie on server requests
        lookupCookie: "next-i18next",
        lookupLocalStorage: "i18nextLng",

        // cache the language in cookies and local storage
        caches: ["cookie", "localStorage"]
    },
    react: {
        // trigger a rerender when language is changed
        bindI18n: "languageChanged",
        // we're NOT using suspsense to detect when the translations have loaded
        useSuspense: false
    }
});


export default nextI18next;

My server.js

const express = require('express')
const next = require('next')
const nextI18NextMiddleware = require('next-i18next/middleware').default
const nextI18next = require("./i18n")


const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {
    await app.prepare()
    const server = express()

    await nextI18next.initPromise
    server.use(nextI18NextMiddleware(nextI18next))

    server.get('*', (req, res) => handle(req, res))

    await server.listen(port)
    console.log(`> Ready on http://localhost:${port}`) // eslint-disable-line no-console
})()

Finally my _app.js has this as export line

export default nextI18next.appWithTranslation(App)

If you guys have any idea I would be really glad to ear it :) Thank you.

4

1 回答 1

1

Well I wasn't using server.js because I forget to tell my package.json to start it.

"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"

Now the errors are gone

于 2020-06-13T14:20:06.930 回答