在 vercel 上部署后，next-i18next 无法在动态页面中使用 serversideprops

Question

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

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

我在 vercel 上部署了所有静态页面，在 vercel 上都运行良好。但动态页面在 vercel 上不起作用。它显示该动态页面的 404 页面。

下面是动态页面的代码。（页面/测试页面/[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;

如何解决这个问题？

Answer 1

在 next-i18next.config.js 中添加 localePath 对我的情况确实有帮助。

const path = require('path')

module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'de'],
      localePath: path.resolve('./public/locales')
    }
  };

Answer 2

我遇到了同样的问题，为了临时修复，我使用了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