按照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
- 上述的组合
1条答案
按热度按时间0ve6wy6x1#
next export
不支持fallback: true
。我应该使用next build
--这也将在构建时生成静态HTML,同时还支持在资源不存在的情况下进行运行时获取。