如何在Next.js 13中用generateStaticParams生成全宝可梦路由参数列表

解决方法 #

核心思路 #

generateStaticParams的职责是提供所有需要静态生成的路由参数列表，而非获取单页数据。因此需要先获取所有宝可梦的名称，再将这些名称转换成Next.js要求的参数格式，最后由页面组件根据参数自行获取对应数据。

具体修改步骤 #

1. 新增获取所有宝可梦名称的查询函数
   新增一个GraphQL查询，用来批量获取宝可梦名称列表（可根据需求设置数量，比如初代151只）：

   const fetchAllPokemonNames = async () => {
     const ALL_POKEMON_QUERY = `
     query pokemons($limit: Int!) {
       pokemons(limit: $limit) {
         results {
           name
         }
       }
     }
     `;
   
     const res = await fetch("https://graphql-pokeapi.graphcdn.app/", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         query: ALL_POKEMON_QUERY,
         variables: { limit: 151 },
       }),
     });
   
     const data = await res.json();
     // 返回仅包含名称的数组
     return data.data.pokemons.results.map(item => item.name);
   };
   

2. 修改generateStaticParams生成参数列表
   调用新函数获取所有名称，转换成{ pokemonName: 名称 }的格式数组：

   export const generateStaticParams = async (): Promise<PageParams[]> => {
     const allPokemonNames = await fetchAllPokemonNames();
     return allPokemonNames.map(name => ({
       pokemonName: name
     }));
   };
   

3. 保留现有页面组件逻辑
   你的页面组件已经通过use(fetchData(pokemonName))根据参数获取对应数据，无需修改。Next.js在静态生成时会遍历所有参数，为每个宝可梦生成独立的静态页面。

概念澄清 #

之前的困惑源于对generateStaticParams职责的误解：

• 它不负责获取页面渲染数据，只提供路由参数；
• 页面数据由每个参数对应的页面组件自行获取；
• 静态生成阶段，Next.js会根据参数数组，自动触发每个页面的渲染和数据获取。

内容的提问来源于stack exchange，提问作者Faab01