在 NextJs 上使用动态路由实现 i18n

Question

我正在使用 Next.js 实现动态路由和国际化。我的应用程序包含 2 个语言环境：en-US 和 es-MX。我正在尝试生成以下路线：

/blog/posts/[id]
/es-MX/blog/posts/[id]

使用默认语言环境 (en-US)，我的链接指向 /blog/posts/id，我可以导航到任何 ID；例如：/blog/posts/1 没有任何问题。但是，当我切换语言环境时，我的链接现在指向路由 /es-MX/blog/posts/1，这又会导致 404 错误 - 未找到。

我的 slug 目录由结构 pages/blog/posts/[id].js 组成，在这个文件中我使用 getStaticPaths 生成上述语言环境的路径：

export const getStaticPaths({locales}) => {
   const res = await fetch(`${server}/api/posts`);
   const posts = await res.json();

   const ids = posts.map((post) => post.id);
   const paths = ids.map((id) => ({
      params: {id: id.toString(), locale: 'en-US' },
      params: {id: id.toString(), locale: 'es-MX' },
   }));

   return {
       paths,
       fallback: false,
   };
}

我打算根据当前语言环境从 api 中提取 post 翻译。除这条路线外，其他所有内容（包括应用程序中的所有其他路线）都按预期工作。我错过了什么？

Answer 1

你遇到的问题是你在 params 内返回 locale 这是错误的，locale 应该在 params 之外，因为它可以通过 context.locale 而不是 context.params.locale 访问，它适用于 defaultLocale，因为这是 getStaticPaths 和 locales 的默认行为，请阅读有关此 here.

的更多信息

最好像下面那样重做 getStaticPaths 以避免 params:

出现问题

export const getStaticPaths = async ({ locales }) => {
  const res = await fetch(`${server}/api/posts`);
  const posts = await res.json();

  const ids = posts.map((post) => post.id);
  const paths = ids
    .map((id) =>
      locales.map((locale) => ({
        params: { id: id.toString() },
        locale, //locale should not be inside `params`
      }))
    )
    .flat(); // to avoid nested arrays

  return {
    paths,
    fallback: false,
  };
};

在 NextJs 上使用动态路由实现 i18n

Implementing i18n with Dynamic Routing on NextJs

routes

dynamic

internationalization

next.js