Page router hook does not get the correct query object

[JW9506]

Problem

Page router hooks object does not receive a populated query object.

When I use the <Link href="..." as="..."> trick to pass parameters to a page, along with Koa listening on the exact route, such as the following, an empty query object is received in the router hooks

To Reproduce

https://github.com/JW9506/nextjs-bug-reproduce

Issue: the Router hook received in ZPage page contains an empty query object
Expected: Whenever ZPage is refreshed, should receive correct query object

The following is observed

System information

• OS: [Windows]
• Browser (if applies) [chrome]
• Version of Next.js: [9.3.6]
• Version of Node.js: [v12.16.1]

[JW9506]

Can someone help? Or am I doing something wrong in this implementation of url masking?

[ijjk]

Hi, the page you are trying to pass the custom query values to is automatically statically optimized at build time since you aren't defining a data method such as getServerSideProps.

Since this page is statically optimized to an HTML file at build time instead of re-rendering for each request, the custom query values can't be passed using a custom server like this unless you leverage the built-in dynamic-routing support in Next.js so that the route params can be parsed by Next.js or opt-out of the automatic static optimization by adding getServerSideProps to signify that the page requires re-rendering on each request

[JW9506]

Thank you, the key thing was I did not specifically add getInitialProps method

Now, it works

[jsonjunkie]

hey, check your repo, i used next router to get access to params instead of link

[JW9506]

I checked your pr, you used Router instead of Link but it did not make a difference

[jsonjunkie]

hmmm, thats weird. i was able to console.log the param as well as see it on the page after pressing the button on my machine. well glad you got it working anyways!

[JW9506]

Did you also try to refresh the new page and see the param rendered on the browser?