问题

抱歉，以下是您要翻译的内容：

Having followed the documentation on i18next/next-i18next to configure i18n and then the instructions on this locize blog post on how to export static sites with next export, I am able to export localised versions of each page.

The problem is that pages that have not been statically generated return a 404, despite setting fallback: true in the getStaticPaths return object. The page works on my localhost but not when deployed with Vercel.

Code:

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

There is a warning in the console react-i18next:: You will need to pass in an i18next instance by using initReactI18next when entering a non-generated page (alongside the not-found error, of course). An issue raised about this warning is interesting, but I could not find an answer to my issue within: https://github.com/i18next/next-i18next/issues/1917.

Attempts to fix:

• adding revalidate: 10 to the return object of getStaticProps
• using fallback: 'blocking'
• trying a few different variants of localePath in next-i18next.config including the recommendation featured here: https://github.com/i18next/next-i18next#vercel-and-netlify
• adding react: { useSuspense: false } to next-i18next.config
• combinations of the above

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

答案1

得分: 1

next export 不支持 fallback: true，如其文档所述。我应该一直使用 next build - 这也会在构建时生成静态 HTML，同时支持在资源不存在时进行运行时获取。