Next.js reference error "client" is not defined

Question

I am having an error when trying to fetch product data from sanity with getStaticPaths

here is my code:

import React, { useState } from "react";

function ProductPage({ product, products }) {
const { image, name, details, price } = product;

return (
<div className="pdPage">
  <div className="container">{name}</div>
</div>
);
}

export default ProductPage;

export const getStaticPaths = async () => {
const query = `*[_type == "product"] {
  slug {
    current
  }
 }
 `;

const products = await client.fetch(query);

const paths = products.map((product) => ({
params: {
  slug: product.slug.current,
},
}));

return {
paths,
fallback: "blocking",
};
};

 export const getStaticProps = async ({ params: { slug } }) => {
 const query = `*[_type == "product" && slug.current == '${slug}'][0]`;
 const productsQuery = '*[_type == "product"]';

 const product = await client.fetch(query);
const products = await client.fetch(productsQuery);

console.log(product);

return {
  props: { products, product },
};
};

And then I get reference error client is not defined from getstatic client.fetch I even delete my code and replace from tutor github repository, but get the same error

Answer 1

After figure it out sometimes I found that I forgot to import client from