i assume you use the pages router

because useRouter().query contains information from the request instance, during prerendering it is {} unless you have getServerSideProps. so yeah, you need to add an empty getServerSideProps if you want router.query to have valid data immediately.

@joulev it seems like i can't use it Error: getServerSideProps cannot be used with "output: export"

then you can't. useRouter().query will be empty during the first render and you need to make a loading screen.

it will be empty, but you are incorrect about the loading screen. it's possible to rely on window.location.pathname and just forget about useRouter. Not the solution I like to have, but at least it's working one

useRouter().query includes both the dynamic route segments and the search params. the dynamic route can be known in advance but the search params cannot be known in advance. hence it will be empty in first render and if you use it you will need a loading screen.

you are probably looking for useRouter().pathname

no it should be correct in the first render. source: i use it all the time.

window.location.pathname won't work during server-side prerendering. so you need to use it inside a useEffect. another loading screen

no, it's incorrect. source: console.log
it returns me /customer/[id] instead of real pathname. window.location.pathname will work without loading screen, I just need to skip static rendering for it (it doesn't makes sense to render anything statically anyway for dynamic params).

well, alright. since that works for you, if it works it works

for those who will search for this issue later on - here is the solution for such kind of URL /customer/[id]:

const Page = () => {
  return (
    <NoSSR>
      <Customer id={typeof window !== 'undefined' && window.location.pathname.split('/')[2]} />
    </NoSSR>
  );
};