SSG is not creating in Next.js 13.4

Question

In Nextjs 13.4 I am haveing a page portfolio inside this page there is a dynamic page [id] in portfolio page, icons and title of porfolio is shown, clicking in a single portfolio it will go to portfolio/[id]. all the porfolios are stored in a array of objec named portFolioData in data.js folder

the problem is static html file building for the portfolio page but not for the id pages

enter image description here

this is the portfolio page

import React from 'react'

import portfolioData from '@/app/data'
import Link from 'next/link'
import { syne } from '@/components/util/fonts'


const getPortFolios = () => {
  return portfolioData
};

const Page = () => {
  const portfolios = getPortFolios();
  return (
    <div className='w-full pt-[40px] pb-[115px] sm:pt-[60px] sm:pb-[180px] lg:pt-[90px] lg:pb-[235px]'>
      <div className='mx-auto lg:w-[1180px] grid justify-center gap-[15px] sm:gap-[21px] grid-cols-2 md:grid-cols-3'>
        {portfolios?.map((item, index) => (
          < Link key={index} href={`portfolio/${item?.id}`} >
                  <img src={item.icon} alt={item.title} className='w-full h-full object-cover rounded-t-[10px]' />
          </Link>
        ))}
      </div>
    </div >
  )
}
export default Page

and I this is portfolio[id]

export function generateStaticParams() {
  return portfolioData.map((portfolio) => ({
    id: portfolio.id.toString(),
  }));
}


const Page =  ({ params }) => {
  const portFolioId = params.id;
  const portfolio = portfolioData.find(portfolio => portfolio.id === portFolioId);
  const swiperArrowStyles = "top-0 w-[126px] bg-[#b4b6b733] h-full flex justify-center items-center absolute z-[2] cursor-pointer";