通过子路径对 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。

我如何确保网站也为 en 子路径静态生成页面？

解决方法

最后是因为接下来，在 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,}
}