如何解决通过子路径对 next.js 网站进行国际化无法在子目录上工作?
我正在尝试通过 next.js 的子路径功能将我的网站国际化。
这是我的module.export
:
/* eslint-disable prettier/prettier */
module.exports = {
i18n: {
defaultLocale: 'fr',locales: ['en','fr'],},react: {
useSuspense: false,wait: true,}
这是我的 Page
文件夹的结构:
.
│ 404.js
│ about.js
│ blog.js
│ index.js
│ projects.js
│ tags.js
│ tree.txt
│ _app.js
│ _document.js
│
└───blog
│ │ [...slug].js
│ │
│ └───page
│ [page].js
│
└───tags
[tag].js
当我在根页面目录中时,一切都适用于子路径。 localhost:3000/about
,localhost:3000/en/about
有效。 localhost:3000/fr/about
按预期重定向为 localhost:3000/about
。
但是当我尝试访问文件夹中静态生成的页面时,在 en
子路径中(例如 localhost:3000/en/blog/article1
,我得到 404。
解决方法
最后是因为接下来,在 SSR 中,只为根 /
生成了一个页面,而不是为不同的本地人(例如 /fr/
)生成了一个页面。
我必须按如下方式更改 getStaticPaths()
以更正它:
export async function getStaticPaths({ locales }: { locales: any }) {
const tags = await getAllTags('blog')
const path = (locale) =>
Object.keys(tags).map((tag) => ({
params: {
tag,},locale,}))
const paths = locales.map((locale) => path(locale)).flat()
return {
paths: paths,fallback: false,}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。