I am have both product/[id] and [...uri] routes in my pages. When I try to visit product/[id] page, first gives 404 then on hard refresh gives correct content! but [...uri] pages works fine.

here is [...uri] code:

import { GetStaticProps } from 'next'
import { PageTypeQueryResult, siteSettingsQuery } from '~/api/sanity/queries'
import { nextUriToString } from '~/utils'
import { getClient as getSanityClient, pageTypeQuery, SiteSettingsQueryResult } from '~/api/sanity'

export { default } from '~/containers/Page'

type PageType = PageTypeQueryResult<'article' | 'course' | 'page'>

export const getStaticProps: GetStaticProps = async (context) => {
  const { params = {}, preview = false } = context

  const { uri } = params

  const sanityClient = getSanityClient(preview)

  const uriString = nextUriToString(uri)

  const [page, settings] = await Promise.all([
    sanityClient.fetch(pageTypeQuery, {
      documentTypes: ['course', 'page', 'article'],
      uri: uriString,
      preview,
    }) as PageType | null,
    sanityClient.fetch(siteSettingsQuery, {preview}) as SiteSettingsQueryResult | null,
  ])

  if (page) {

    return {
      props: {...props},
      revalidate: 60 * 10,
    }
  }

  return {
    notFound: true,
    revalidate: true,
  }
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  }
}

and product/[id] pages

import * as React from 'react'
import { GetStaticProps, GetStaticPaths } from 'next'
import { useRouter } from 'next/router'
import { CircularProgress } from '@mui/material'
import {
  siteSettingsQuery,
  getClient as getSanityClient,
  SiteSettingsQueryResult,
} from '~/api/sanity'

import { Page } from '~/containers'

export default function ProductPage(props) {
  const router = useRouter()

  if (router.isFallback) {
    return <CircularProgress size={40} />
  }

  return (
    <Page {...props}>
      <Product />
    </Page>
  )
}

export const getStaticProps = async (ctx) => {
  const { params = {}, preview = false } = ctx
  const { id } = params

  const sanityClient = getSanityClient(preview)
  const apiClient = new ApiClient(process.env.SHOP_API_V3)

  const settings = await (sanityClient.fetch(siteSettingsQuery, {
    preview,
  }) as SiteSettingsQueryResult | null)


  if (product) {
    return {
      props: {...props},
      revalidate: 604800,
    }
  }

  return {
    notFound: true,
    revalidate: 604800,
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: 'blocking',
  }
}