如何在 Next.js 中设置多语言环境动态页面的 getStaticPaths
How to setup getStaticPaths of multi-locale dynamic pages in Next.js
今天,在我的副项目中,我遇到了一个与在 Next.js 中设置多语言环境动态页面的 getStaticPaths 有关的问题。我研究了一下,发现有很多人卡在这个问题上。
我创建了一个动态页面 [slug].js 来处理我从数据库中获得的所有动态数据。我正在处理的网站也是多语言网站,它使用 next-translate 来处理 i18n。
在 [slug].js 中,我们必须设置一个函数 getStaticPaths 来处理所有静态 url。如果网站有 1 种语言会更容易,但是超过 2 种语言我们必须循环它。
这是我用来处理它的代码,我正在使用 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 的最终结果中。
如果答案对某人有帮助,我对 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 有关的问题。我研究了一下,发现有很多人卡在这个问题上。
我创建了一个动态页面 [slug].js 来处理我从数据库中获得的所有动态数据。我正在处理的网站也是多语言网站,它使用 next-translate 来处理 i18n。
在 [slug].js 中,我们必须设置一个函数 getStaticPaths 来处理所有静态 url。如果网站有 1 种语言会更容易,但是超过 2 种语言我们必须循环它。
这是我用来处理它的代码,我正在使用 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 的最终结果中。
如果答案对某人有帮助,我对 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,
}
}