I was practicing dynamic routing first set of code is the page.jsx file which is under [id] folder and it is called under the second set of code.
const fetchStaticDetails = async()=>{
const res = await fetch(https://dummyjson.com/products)
const data = res.json()
return data.products.map((product)=>(
{id:product.id.toString()}
)) ;
}
async function fetchDetails(id){
const res = await fetch(https://dummyjson.com/products/${id})
const data = res.json()
return data
}
export default async function ProductDetails({params}) {
const productDetails = await fetchDetails(params.id)
console.log(productDetails)

return (
<div>
<h1>Id:{params.id} </h1>

</div>
)
}




"use client"
import { useRouter } from "next/navigation"
const ProductBtn = ({id}) => {
const router = useRouter()
function handleClick() {
router.push(/products/${id})
}
return (
<div>
<buttton onClick={handleClick} className="cursor-pointer">Get Details</buttton>
</div>
)
}
export default ProductBtn