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

Question

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

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

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

Answer 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 的最终结果中返回它。