如何在 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，我们会将每个语言环境的每个路径名添加到路径数组，return 它在 getStaticPaths 的最终结果中。

Answer 2

如果答案对某人有帮助，我对 Huu Phong 的答案进行了一些修改首先，我从 sanity API 中获取所有 post 然后我在其上进行映射以获取每个元素，然后我在每个元素上进行映射以仅获取 slug 并在每个 slug 上添加一个区域设置键

export async function getStaticPaths({ locales }) {
  const query = encodeURIComponent(`{
      "posts": *[_type == "post"]  {
        ...,
        categories[]->
      }}
    `)

  const url = `https://${process.env.NEXT_PUBLIC_PROJECT_API}.api.sanity.io/v1/data/query/production?query=${query}`
  const result = await fetch(url).then((res) => res.json())

  const paths = []
  result.result.posts.map((element) => {
    return locales.map((locale) => {
      return paths.push({
        params: { slug: `${element.slug.current}` },
        locale,
      })
    })
  })

  console.log("***---paths---***", paths)

  return {
    paths,
    fallback: true,
  }
}

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

How to setup getStaticPaths of multi-locale dynamic pages in Next.js

multilingual

locale

reactjs

next.js