0

我正在使用 nextjs 开发一个项目，我使用 next_i18_next 库进行本地化，当我尝试导航到另一条路线时出现未定义的错误。

Cannot read properties of undefined (reading '_nextI18Next')
    at AppWithTranslation (/home/rgo/projects/inbo-panel-front/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:90:29)
    at processChild (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/home/rgo/projects/inbo-panel-front/node_modules/next/dist/server/render.js:686:46)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.tsx:126:26)
    at Object.defaultGetInitialProps (/home/rgo/projects/inbo-panel-front/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:191:16)

当我声明一个新页面时，如果我没有声明 getStaticProps 或 getServerSideProps，即使我不使用翻译挂钩，我也会收到此错误。当我尝试转到不存在的路线而不是 404 页面时，我收到此错误。

这是我的 next-i18next.config.js 文件：

module.exports = {
    i18n: {
        defaultLocale: 'fa',
        locales: ['fa','en'],
        defaultNS:['fa'],
        debug:true,
        autoMode:false,
        browserLanguageDetection: false,

    }
}

这是我的 next.config.js：

  const {i18n} = require('./next-i18next.config');
    
    module.exports = {
        i18n,
        reactStrictMode: true,
        webpack(config) {
            config.module.rules.push({
                test: /\.svg$/,
                use: ["@svgr/webpack"]
            });
    
            return config;
        },
        future: {webpack5: true}
    
    }

and my _app.tsx:

const App = (props: MyAppProps) => {
    const {
        Component,
        emotionCache = clientSideEmotionCache,
        pageProps,
    } = props;
    return (
        <CacheProvider value={emotionCache}>
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0, user-scalable=no"
                />
            </Head>

            <ThemeProvider theme={getTheme(theme)}>
                <CssBaseline />
                <Component {...pageProps} />
            </ThemeProvider>
        </CacheProvider>
    );
};

export default appWithTranslation(App) ;

我在我的配置中做错了吗？我试图创建一个 404 页面，但我不能在那里声明 getStaticProps 或 getServerSideProps。该库可以工作，但我必须声明 props 函数并为 props 提供命名空间和文件，如下所示：

export const getStaticProps: GetStaticProps = async (context) => {

    return {
        props: {
            ...(await serverSideTranslations(context.locale as string, ['common', 'login'])),
            fallback: false
        }
    };
}

但是当我尝试导航到不需要翻译或不存在的路线时，我得到了上述错误，在不存在的情况下，我没有得到 404 页面并得到未定义的错误。

4

0 回答 0