如何在 Next.js 中设置多语言环境动态页面的 getStaticPaths

Posted 2023-03-30

【中文标题】如何在 Next.js 中设置多语言环境动态页面的 getStaticPaths

【英文标题】：How to setup getStaticPaths of multi-locale dynamic pages in Next.js

【发布时间】：2021-08-19 23:57:04

【问题描述】：

今天，在我的副项目中，我遇到了一个与在 Next.js 中设置多语言环境动态页面的 getStaticPaths 相关的问题。我研究发现有很多人陷入了这个问题。

我创建了一个动态页面 [slug].js 来处理我从数据库中获取的所有动态数据。我正在开发的网站也是多语言网站，它使用 next-translate 处理 i18n。

在 [slug].js 中，我们必须设置一个函数 getStaticPaths 来处理所有静态 url。如果网站有 1 种语言会更容易，但如果有超过 2 种语言，我们必须循环它。

【参考方案1】：

这是我用来处理它的代码，我正在使用 Notion API 并将其用作多语言网站的数据库：

export async function getStaticPaths( locales ) 
  const notion = new Client( auth: process.env.NOTION_API_OFFICIAL_KEYS );

  const databaseId = process.env.NOTION_PAGE_ID_EMBVN_DATABASE_PAGE;
  const response = await notion.databases.query(
    database_id: databaseId,
  );

  let paths = [];

  response.results.forEach((block) => 
    for (const locale of locales) 
      paths.push(
        params: 
          slug: block.properties.embcode.title[0].plain_text.toString(),
        ,
        locale,
      );
    
  );

  return 
    paths,
    fallback: false,
  ;

使用 forEach，我们会将每个语言环境的每个 pathName 添加到 paths 数组中，以在 getStaticPaths 的最终结果中返回它。

【讨论】：

返回包含params 和locale 的路径对象时，我发现包含区域设置与不包含区域设置没有区别。您愿意解释一下为什么将语言环境添加到路径中吗？

@MikeMajara 在 Next.js 使用具有 2 种或更多语言的网站并使用动态 url 时，如果我们不为语言环境创建循环以便 getStaticPaths 可以为语言环境生成两种 url 类型，则 404 错误当用户直接转到第二个语言环境的 url 时会发生。我们仍然可以从默认语言加载页面，来回切换它们而无需通过 NextLink 重新加载。但是，如果用户直接进入或重新加载第二语言环境中的页面，则会出现 404 错误，因为 Next.js 没有创建静态路径。

太棒了，感谢您的洞察力！如果可以的话，最后一个问题是：我在文档中的哪里可以找到这个，或者这些知识可以/应该从其他地方推断出来？我找不到它......并提到locale或任何其他可选键不存在。

@MikeMajara 我现在只是 Next.js 的初级开发人员。我很久以前就遇到过这个问题，在互联网上到处都可以找到 Next.js 的文档，但找不到任何解决方案。幸运的是，我的一个朋友是 javascript 的全栈开发人员，他向我解释并帮助我解决了这个问题。我想我以后应该再分享给其他人。