I can't fetch the data from sanity. on the product detail i get 404

/index file/ i can't fetch the data from sanity. the slug and schema files looks fine.When i click on the product i get the following error : 404 page could not be found. Anyone could please help me :-).

import React from 'react';
import { client } from '../lib/client';
import { Product, FooterBanner, HeroBanner} from '../components';

const Home = ({ products, bannerData}) => {
  return (
    <>
      <HeroBanner heroBanner={bannerData.length && bannerData[0]} />
      <div className='products-heading'>
        <h1>Best Selling Products</h1>
        <p>Speakers of many variations passages</p>
      </div>
      <div className='products-container'>
        {products?.map((product) => <Product key= {product._id} product={product}/>)}
      </div>
      <FooterBanner footerBanner={bannerData && bannerData[0]} />
    </>
  )
}
export const getServerSideProps = async () => {
  const query = '*[_type == "product"]';
  const products = await client.fetch(query);

  const bannerQuery = '*[_type == "banner"]';
  const bannerData = await client.fetch(bannerQuery);

  return {
    props: { products, bannerData }
  }
}

export default Home;