Unhandled Runtime Error AxiosError: Request failed with status code 404

There is an error coming from Axios is a 404 error, its from this line of code where we call the API for the product.[slug] screen

export default function ProductScreen(props) {
  const {product} = props
   const router = useRouter()
   const { state ,dispatch } = useContext(Store);
   if (!product) {
    return <Layout title="Product not found">Product not found</Layout>;
  }
   const addToCartHandler = async() => {
    const existItem = state.cart.cartItems.find(
      (x) => x.slug === product.slug
    );
    const quantity = existItem ? existItem.quantity + 1 : 1
    const {data} = await axios.get(`api/products/${product._id}`)
     if(data.countInStock < quantity){
      return toast.error('Sorry. Product is out of stock');
    }
    dispatch({ type: 'CART_ADD_ITEM', payload: {...product, quantity}})
    router.push("/cart")
  }

This is also the code for creating the product.[id] API

const { default: db } = require("@/utilities/db")
const { default: Product } = require("models/Product")
 const handler = async (req, res) => {
    await db.connect();
    const product = await Product.findById(req.query.id);
    await db.disconnect();
    res.send(product);
  };
 export default handler

I’ve also completed the code in video: Video-19-Load-Products-MongoDB