0

我正在尝试通过 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/aboutlocalhost:3000/en/about工作。按预期localhost:3000/fr/about重定向。localhost:3000/about

但是当我尝试访问文件夹中静态生成的页面时,在en子路径中(localhost:3000/en/blog/article1例如,我得到一个 404.

如何确保站点也为en子路径静态生成页面?

4

1 回答 1

1

最后,这是因为 next,在 SSR 中,只为 root 生成了一个页面/,而不是为不同的本地人(/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,
  }
}
于 2021-07-06T11:25:01.803 回答