I have a products page in my NextJs app. Dynamic routes should get rendered statically using generateStaticParams(), however they do not. when I run “npm run build” it says “Generating static pages (3/3)”when it should be much more than 3 and also when I deploy the project on Vercel and click on a single product card. instead of it taking me to the corresponding product page, it gives me “500 internal server error”. Also, it used to work before, but now I wrote some new types, otherwise I did not touch anything else related to this page, but it stopped working.

import Image from "next/image"

export async function generateStaticParams() {
    const res = await fetch('https://dummyjson.com/products')
    const products = await res.json()

    const paths = products.products.map((product: {id: number}) => ({
        id: `${product.id}`,
    }))

    return paths
}


async function getProduct(id: number) {
    const res = await fetch(`https://dummyjson.com/products/${id}`)
    const data = await res.json()
    return data
}


export default async function Service({ params }: { params: {id: number} }) {
    
    const product = await getProduct(params.id)

    return (
        <div style={{display: "flex", flexDirection: "column"}}>
            <h1>{product.title}</h1>
            <Image src={product.thumbnail} alt="asd" width={400} height={400}/>
            <span>In stock: {product.stock}</span>
        </div>
    )
}

This is the parent:

"use client";

import '@/styles/BlogServices.css'
import ServiceSection from '@/components/ServiceSection.tsx'
import React from 'react'


export default function Services() {
    
    interface Product {
        id: number,
        title: string,
        description: string,
        price: number,
        image: string,
        category: string
    }


    const [searchedService, setSearchedService] = React.useState<Product[]>([])
    const [defaultService, setDefaultService] = React.useState<Product[]>([])

    React.useEffect(() => {
        fetch('https://dummyjson.com/products')
        .then(res => res.json())
        .then(res => {
            setSearchedService(res.products)
            setDefaultService(res.products)
        })
    },[])



    function handleSearch (value:string) {
        setSearchedService(defaultService.filter(item => item.title.toLowerCase().includes(value.toLowerCase())))
    }

    return (
        <div className="services-page-container">
            <div className="blog-service-page-title-container parent-flex-column-center dark:bg-slate-900">
                <span className="blog-service-page-short-title">SERVICES</span>
                <h1 className="blog-service-page-title font-bold">Choose and book service with us</h1>
                <p className="blog-service-page-desc text-page-subtitle text-xl dark:text-slate-400">Subscribe to learn about new product features, the latest in technology, solutions, and updates.</p>
            </div>
            <ServiceSection 
                servicePage
                descStyle='services-section-desc'
                handleSearch={handleSearch}
                searchedService={searchedService}
                defaultService={defaultService}
            />
        </div>
    )
}

And this is the card component itself:

"use client";

import servicearrow from '../public/assets/servicearrow.svg'
import '../styles/Card.css'
import Image, { StaticImageData } from 'next/image'
import { useRouter } from 'next/navigation'

interface ServiceCard {
    id?: number;
    title: string;
    desc: string;
    date?: string;
    img: string | StaticImageData;
    imgStyle: string;
    contStyle: string;
    descStyle: string;
    servicepage?: boolean;
    handleClick?: () => void;
}

export default function ServiceCard(props: ServiceCard) {

    const router = useRouter()

    function handleClick() {
        props.servicepage && router.push(`/services/${props.id}`)
    }
    
    return (
        <div className={`card-container ${props.contStyle} dark:bg-slate-600`} onClick={handleClick}>
            <Image src={props.img} className={`card-img ${props.imgStyle}`} width={300} height={300} alt=''/>
            <span className='card-date'>{props.date}</span>
            <h3 className='text-xl font-bold mb-5 dark:text-slate-200'>{props.title}</h3>
            <p className={`card-description ${props.descStyle} dark:text-slate-50`}>{props.desc}</p>
            <span className='text-service-card-orange flex mt-auto dark:text-orange-700'>View full information <Image className='ml-6' src={servicearrow} alt="" /></span>
        </div>
    )
}

This is the file structure:

NOTE: “services” is the products page I am talking about.

I am new to TypeScript, but still I don’t think adding some new types should have caused this to stop working. Thanks in advance.

I do not even know what to try, because I can not find anything to help me out online and not being familiar with typescript makes it even worse.