React NextJS 13 page navigation – react-relay query on page – prerendering error during build

I have a react component called pagesproductDetail.tsx which loads a product detail data. The productId comes from query parameter, the data comes from a graphQL query called productStateByKeyQuery and is defined in an external file. Starting the npm run dev the page works, when I navigate to this page an url like this: “ the data is loaded and the detail page looks good.

When I start npm run build on my machine, the build fails with error:

Error occurred prerendering page "/productDetail". Read more: https://nextjs.org/docs/messages/prerender-error
RelayNetwork: No data returned for operation productStateByKeyQuery, got error(s):
Variable id is required.

This seems correct, during build there is no productId available. But how to tell nexjs not to prerender this page (or the part of this page) because the graphQL query won’t work during build time?

My code is:

import { useRouter } from 'next/router';
import React from 'react'
import { useLazyLoadQuery } from "react-relay";

import {productStateByKeyQuery} from '@/queries/productStateByKey'
import type {productStateByKeyQuery as qt} from '@/queries/__generated__/productStateByKeyQuery.graphql'


export default function ProductDetail() {
    const router = useRouter()
    const productId = router.query["productId"];
    const data = useLazyLoadQuery<qt>(productStateByKeyQuery, {"id": productId}, {fetchPolicy: 'store-or-network'} );

  return (
    <>
        <div>ProductDetail {router.query["productId"]}</div>
        <div>ID:         {data.productStateByKey?.id}    </div>
        <div>Version:         {data.productStateByKey?.version}    </div>
        <div>Product code:         {data.productStateByKey?.product?.code}    </div>
    </>
  )
}

Where the query definitions is something like this:

import { graphql } from 'relay-runtime';

export const productStateByKeyQuery = graphql`query productStateByKeyQuery($id: UUID!) {
  productStateByKey(id: $id) {
    id
    product { code }
  }
}`;

Don’t sure about to move this code to getServerSideProps because of using the route query parameter – but I am not too familiar with these concepts. Any advice will be welcome!