时间戳

首页 > 解决方案 > next.js 网站的国际化通过子路径在子目录上不起作用？

reactjs - 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子路径静态生成页面？

标签： reactjsinternationalizationnext.jsserver-side-renderingssg

解决方案

最后，这是因为 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,
  }
}

推荐阅读