0

我正在使用next-i18next模块来支持多语言。

我也有一些静态页面和动态页面。两者都在本地工作正常。

我在vercel上部署了所有静态页面，在vercel上一切正常。但是动态页面不适用于vercel。它显示该动态页面的 404 页面。

下面是动态页面的代码。(pages/test-page/[questionId].js)

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        />
    )
}
TestPage.Layout = Layout

export const getServerSideProps = async ({ locale }) => ({
    props: {
        ...(await serverSideTranslations(locale, ['home', 'common']))
    }
});

export default TestPage;

如何解决这个问题？

4

1 回答 1

1

我遇到了同样的问题，为了临时修复，我使用了next-i18nexti18n中的对象，该对象具有一个名为 getResource 的函数，该函数通过其翻译获取当前语言环境

// import { i18n } from 'next-i18next';
// import { useRouter } from 'next/router';

const [translation, setTranslation] = useState({});
useEffect(() => {
  const bundle = i18n.getResource(locale, 'common');
  setTranslation(bundle);
}, []);

为了避免使用 t 函数重写代码，您可以使用

  // LINK https://stackoverflow.com/a/43849204/14263138
  const t = (word) => word
    .split('.')
    .reduce((p, c) => (p && p[c]) || null, translation);

应用此功能后，您无需使用getServerSideProps

于 2021-10-24T02:37:55.737 回答