getStaticProps for dynamic products Nextjs

Question

i am trying to getStaticProps for a dynamic product component but when i try i am getting an error because i cannot use the query param on the getStaticProps function. That's now my code. Thanks for your time!

import React, { useEffect, useState } from 'react'
import { ProductPage, RelatedProducts } from './../components'

import { useRouter } from 'next/router'
import { getProductApi } from '../api/product'
const Product = () => {
  const [product, setProduct] = useState(null)
  const { query } = useRouter()

  useEffect( () => {
    (async () => {
      const response = await getProductApi(query.product);
      setProduct(response);
    })();
  }, [query])
  if(!product) return null;
 

  return (
    <div>
      <ProductPage product={product}/>
      <RelatedProducts />
    </div>
  )
}
export default Product

Answer 1

You can get query params in get getStaticProps:

export async function getStaticProps(ctx) {
// first console log params
 console.log('params => ',ctx.params)
   const { product} = ctx.params;
   const req = await fetch(`url?id=${product}`);
   const res = await req.json()
return {
   props: {
     data : res
    };
  }