如何在Next.js中使用generateStaticParams生成每个pokemon的路由段参数列表?

Question

我试图使用Nextjs 13的generateStaticParams来渲染静态数据到我的网页。我如何使用generateStaticParams为每个宝可梦名称生成/pokemon/[pokemonName]等路线列表，而不提供硬编码的宝可梦名称(例如，在这里我将"charmander"作为fetchData的参数，然后它生成路线只是为charmander)?

export const generateStaticParams = async (): Promise<PageParams[]> => {
const res = await fetchData("charmander");
return [
{
pokemonName: res?.data.pokemon.name,
},
];
};

从graphQL-pokeAPI获取pokemon移动:

const fetchData = async (pokemonName: string) => {
const POKEMON_MOVES = `
query pokemon($name: String!) {
pokemon(name: $name) {
id
name
sprites {
front_default
}
moves {
move {
name
}
}
}
}
`;
const res = await fetch("https://graphql-pokeapi.graphcdn.app/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query: POKEMON_MOVES,
variables: { name: pokemonName },
}),
});
const moves = await res.json();
return moves;
};

export default function SpecificPokemon({ params }) {
const { pokemonName } = params;
const pokemonData = use(fetchData(pokemonName));
return (<h1>{pokemonName}</h1>...)
};

在Nextjs13 beta文档中，它说generateStaticParams不需要任何上下文参数。所以我不能像这样把pokemonName传递给generateStaticParams，对吧?

export const generateStaticParams = async (pokemonName: string) => {
const res = await fetchData(pokemonName);

我试着只写fetchData("")和页面只是空白。而且，像这样写也太过了:

return [
{ pokemonName: "bulbasaur" },
{ pokemonName: "ivysaur" },
{ pokemonName: "venusaur" },
];

此外，这是由于我缺乏JS/Next13概念的理解吗?

Answer 1

它们实际上有一个叫做getStaticPaths的特性是专门为此设计的。您可以轻松地调用pokemon api，并在运行时将响应解析为getStaticPaths，以生成您想要使用的静态路径。我鼓励你多玩一下文档，那个团队做了一个杀手级的工作。

Answer 2

export async function generateStaticParams() {
const posts = await getPosts();
return posts.map((post) => ({
slug: post.slug,
})
);
}

这是一个帖子表的例子-但基本上你得到所有的帖子或在你的情况下口袋妖怪，并映射名称到一个数组。

我不确定是否有更好的处理方法，但这应该会给你指明正确的方向。我自己还在研究NextJS，尤其是新的测试版，所以请对此持保留意见。