next-i18next静态导出非生成页Vercel部署404问题求助

已按i18next/next-i18next文档配置国际化，遵循locize教程使用next export生成静态站点，预生成的各页面本地化版本可正常访问，但未静态生成的页面返回404。尽管在getStaticPaths中设置了fallback: true，本地运行一切正常，但部署到Vercel后出现异常。

访问未预生成页面时，控制台会抛出警告：

react-i18next:: You will need to pass in an i18next instance by using initReactI18next

同时伴随404错误。已尝试以下方案但均未解决问题：

• 在getStaticProps返回值中添加revalidate:10
• 将fallback值改为'blocking'
• 调整next-i18next.config中的localePath配置
• 在i18next初始化配置中添加react: { useSuspense: false }

代码示例 #

const ArticlePage: NextPageWithLayout<Props> = ({ article }: Props) => {
    const { i18n, t } = useTranslation('page/news/article')

    const router = useRouter()

    if (router.isFallback) return <div>Loading...</div>

    return <div>Article</div>
}

export const getStaticPaths: GetStaticPaths = async () => {
    let paths: { params: { aid: string; locale: TLocale } }[] = []

    try {
        const response = await api.get(`/articles?per_page=9999`)
        const articles = response.data.data as IArticle[]

        articles.forEach((a) => {
            getI18nPaths().forEach((p) => {
                paths.push({
                    params: {
                        aid: a.base_64_id,
                        locale: p.params.locale,
                    },
                })
            })
        })

        return {
            paths,
            fallback: true,
        }
    } catch (error) {
        return {
            paths,
            fallback: true,
        }
    }
}

export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
    try {
        const article = await api.get(`/articles/${params?.aid}`)

        return {
            props: {
                ...(await serverSideTranslations(locale || 'en', [
                    'footer',
                    'header',
                    'misc',
                    'page/news/index',
                    'page/news/article',
                ])),
                article: article.data as IArticle,
            },
        }
    } catch (error) {
        return {
            notFound: true,
        }
    }
}

ArticlePage.getLayout = function getLayout(page: ReactElement) {
    return <Layout>{page}</Layout>
}

export default ArticlePage

依赖版本 #

"i18next": "22.4.9",
"next-i18next": "^13.1.5",
"react-i18next": "^12.1.5",

内容的提问来源于stack exchange，提问作者Thomas