0

I am trying to use Nextjs 13's generateStaticParams to render static data into my web page. How do I generate the list of routes like /pokemon/[pokemonName] for every pokemon name using the generateStaticParams without providing hard-coded pokemon name (for example here I put "charmander" as argument for fetchData and then it generate route just for charmander)?

export const generateStaticParams = async (): Promise<PageParams[]> => {
  const res = await fetchData("charmander");

  return [
    {
      pokemonName: res?.data.pokemon.name,
    },
  ];
};

Fetching pokemon moves from graphQL-pokeAPI:

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>...)
};

In the Nextjs13 beta docs, it said that generateStaticParams doesn't require any context parameters. So I can't pass pokemonName into generateStaticParams like this, right?

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

I tried to just write fetchData("") and the page just blank. Also, it would be too many to write like this:

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

Also, is this due to my lack of JS / Next13 concept understanding?

Arkellys
  • 5,562
  • 2
  • 16
  • 40
Faab01
  • 1
  • 1

2 Answers2

0

They actually have a feature called getStaticPaths which was specifically designed for this. You can easily make a call to a pokemon api and parse the response into getStaticPaths at run to generate the static paths you want to use. I encourage you to play with the documentation more, that team did a killer job with them.

Dax
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 16 '23 at 00:33
  • He's using the new App directory beta so it is slightly different. – Cigol Jan 31 '23 at 13:47
0
export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  })
 );
}

Here's an example for a posts table - but basically you get all the posts or in your case Pokemon, and map the names to an array.

I'm not sure if there's a better way of handling it but that should point you in the right direction. I'm still reading up on NextJS and especially the new Beta myself, so take with a pinch of salt.

Cigol
  • 105
  • 1
  • 12