I am building a pokedex app with next.js. I am using app dir. Everything is fine while working locally but when I deploy to Vercel it gives 'FALLBACK_BODY_TOO_LARGE' error.

Why I am getting this error? and How can I fix it?

This is my api call

const POKEMON_API = "https://pokeapi.co/api/v2/";

export async function getPokemonList() {
  const res = await fetch(`${POKEMON_API}pokemon?limit=151&offset=0`);
  const data = await res.json();
  const results = data.results;

  const pokemons = await Promise.all(
    results.map(async (pokemon: any) => {
      const res = await fetch(pokemon.url);
      const data = await res.json();
      if (!res.ok) {
        throw new Error("Something went wrong");
      }
      return data;
    })
  );

  if (!res.ok) {
    throw new Error("Something went wrong");
  }

  return pokemons;
}

This is where I use them

export function PokemonCard2({ pokemon }: { pokemon: Pokemon }) {
  const pokeIndex = ("0000" + pokemon.id).slice(-4);
  return (
    <Link href={pokemon.name} key={pokemon.name + "Card"}>
      <div className="bg-slate-900 rounded pt-10 pb-2 flex flex-col justify-center items-center relative">
        <span className=" text-5xl text-slate-500 top-0 right-3 font-bold">
          #{pokeIndex}
        </span>
        <div className="h-[150px] w-[150px] z-0">
          <Image
            src={pokemon.sprites?.other?.dream_world?.front_default || ""}
            alt="pokemon image"
            width={150}
            height={150}
            className="h-full w-full rounded-md"
          />
        </div>
        <h2 className={`text-2xl font-semibold`}>
          {pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}
        </h2>
      </div>
    </Link>
  );
}