Сохранять пространство имен Требуется, даже если объявлено

Question

Я установил next-18next с моим проектом NextJS и React, перевод отлично работает в моем проекте.

Но я продолжаю слышать следующее известное предупреждение:

Вы не объявили массив namespacesRequired в компоненте уровня страницы: withI18nextTranslation(Index). Это приведет к тому, что все пространства имен будут отправлены клиенту, что может отрицательно повлиять на производительность вашего приложения. Для получения дополнительной информации см. https://github.com/isaachinman/next-i18next

Я объявил namespacesRequired в каждом из моих компонентов уровня страницы (кроме страницы 404, потому что я прочитал в документе, который вы не можете)

НО:

• У меня есть только функциональный компонент, поэтому я использовал как getStaticProps, так и withTranslation.

• Я читал, что иногда это может происходить, если у вас нет favicon.ico, но он есть у меня (он отображается на вкладке).

Не знаю, где теперь смотреть... Вот код моей страницы, которая вызывает предупреждение

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

Вот мой конфиг i18n.

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;

Мой 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
})()

Наконец, мой _app.js имеет это как строку экспорта

export default nextI18next.appWithTranslation(App)

Если у вас есть идеи, я был бы очень рад их услышать:) Спасибо.

Answer 1

Я не использовал server.js, потому что забыл сказать своему package.json его запуск.

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

Теперь ошибки исчезли