text: import React from 'react';
  import Head from 'next/head';
  import Link from 'next/link';
  import styles from '../styles/Home.module.css';
  import Image from 'next/image';
  
  export async function getStaticProps() {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=150');
    const data = await response.json();
    return {
      props: {
        pokemon: data.results,
      },
    };
  }
  
  export default function Home({ pokemon }) {
    return (
      <div className={styles.container}>
        <Head>
          <title>NextJS Pokedex</title>
        </Head>
        <h2>Pokemon List</h2>
        <div className={styles.grid}>
          {pokemon.map((pokemon) => (
            <div className={styles.card} key={pokemon.url.split('/')[6]}>
              <Link href={`/pokemon/${pokemon.url.split('/')[6]}`}>
                <a>
                  <Image
                    src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${
                      pokemon.url.split('/')[6]
                    }.svg`}
                    alt={pokemon.name}
                    width="200"
                    height="200"
                  />
                  <h3>{pokemon.name}</h3>
                </a>
              </Link>
            </div>
          ))}
        </div>
      </div>
    );
  }
  