next-i18next,next export & 404 on non-generated pages(with fallback true/blocking)

yzuktlbb  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(102)

按照i18next/next-i18next上的文档配置i18n,然后按照this locize blog post上关于如何使用next export导出静态站点的说明,我能够导出每个页面的本地化版本。
问题是,尽管在getStaticPaths返回对象中设置了fallback: true,但未静态生成的页面仍会返回404。该页面在我的本地主机上工作,但在使用Vercel部署时无法工作。
代码:

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",

在控制台react-i18next:: You will need to pass in an i18next instance by using initReactI18next中,当进入一个未生成的页面时,会出现一个警告(当然,还有一个未找到的错误)。关于此警告提出的一个问题很有趣,但我无法在以下内容中找到问题的答案:https://github.com/i18next/next-i18next/issues/1917
尝试修复:

  • revalidate: 10添加到getStaticProps的返回对象
  • 使用fallback: 'blocking'
  • next-i18next.config中尝试几种不同的localePath变体,包括这里的推荐:https://github.com/i18next/next-i18next#vercel-and-netlify
  • react: { useSuspense: false }添加到next-i18next.config
  • 上述的组合
0ve6wy6x

0ve6wy6x1#

next export不支持fallback: true。我应该使用next build--这也将在构建时生成静态HTML,同时还支持在资源不存在的情况下进行运行时获取。

相关问题