getStaticPaths works in development mode but not in netlify? How to handle more static pages?

Question

I'm trying to build SSR application which generates static pages to display pokemon 0 to 160 showing 20 per page, so to do that I'm using getStaticPaths.

It works in development mode (npm run dev) but when I acess the '/products/1 to /8' in netlify it gets 404 error, but the other pages work fine.

You can see it by yourself here: https://pokemon-commerce.netlify.app/products/1, I left /products page which doesn't use getStaticPaths, just getStaticProps and it works: https://pokemon-commerce.netlify.app/products.

I also would like to know if it is posible to handle more pages, when I tried to generate 64 static pages for all 1281 pokemon it wasn't posible to deploy the website in netlify because this error appeard in the buld log:

Unzipped size must be smaller than 262144000 bytes

You can see the code below:

export const getStaticPaths: GetStaticPaths = async () => {

    let pages = [];
   
    for (let i = 1; i < 9; i++) {
        pages.push({ params: { id: i.toString() } });
        console.log(pages);
    }
    
    return { 
        paths: pages,
        fallback: false, }
}

export const getStaticProps: GetStaticProps = async (content) => {
    const { params }: any = content
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=20&offset=${params.id === 1 ? 1 : (params.id - 1) * 20}`);
    const list = await response.json();

    const promises = list.results.map((pokemon: any) => {
        return fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`)
        .then(res => res.json());
    })

    const products = await Promise.all(promises);
    const page = params.id;
    
    return {
        props: {products: {products}, pageNumber: {page}},
    }
}

const Products = ({products, pageNumber}: any) => {
    const data = (products?.products);
    const page = ([...pageNumber?.page]);

    const handleNavigation = (e: any) => {
    }
 
    return (
        <>
           {data?.map((e: any) => {
                const results = 
<div key={e.name}>
  <div className='image-wrap'>
    <img className='image' src= 
    {e.sprites.other.dream_world.front_default ? 
    e.sprites.other.dream_world.front_default : 
    e.sprites.other['official-artwork'].front_default} 
    alt={e.name}></img>
  </div>
</div>
                return results
           })}
        </>

I tried change the data variable that I am mapping in the Product function to a react state instead, but it doesn't work.

I also tried without getStaticPaths and it works. But I need to get 8 static pages instead of one, or more than 8 if it is posible.