Next.js: Query params not working on dynamic route

[voigtd]

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Assuming the code below and an ID param of 1, when this Link is clicked the URL should be masked as speaker/1, with the Link navigating via query params, i.e. speaker?id=1

<Link prefetch href={`/speaker?id=${this.props.id}`} as={`/speaker/${this.props.id}`} >
   <div>some content</div>
 </Link> 

This code updates the URL correctly as speaker/1 but does not navigate anywhere.

Also, the query params are not working. When I try to manually navigate to a page via query params it does not work. I've tested out using query params with other pages in the app and it is working fine.

When I take away the query params from the 'href' attribute and remove the 'as' attribute, the navigation works, except that a 404 page flickers for a moment on page load.
(i.e. <Link href={`/speaker/${this.props.id}`> )

I have heard of others with the same issue, but I haven't found a solution that works.

For reference, the following is the routing on the server:

app.prepare()
.then(() => {
  const server = express()

  server.get('/speaker/:id', (req, res) => {
    const actualPage = '/speaker';
    const queryParams = { id: req.params.id };
    app.render(req, res, actualPage, queryParams);
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, err => err ? console.log(err) : console.log(`Server listening on http://localhost:${port}`));
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

[nghiepit]

I think

<Link prefetch href={{pathname: '/speaker', query: {id: props.id}}} as={`/speaker/${this.props.id}`} >
   <div>some content</div>
 </Link> 

[viniciusCamargo]

I've just PRed an example that might help you: https://github.com/zeit/next.js/pull/3258/files

[voigtd]

@tronghiep92 @viniciusCamargo Thanks for the help. The issue that I'm having regardless of how I use Link is that I can't navigate to a new page.

For example, if the page I'm on is index.js (the homepage) and I use a link that goes to the speaker page with a query param of ID, that works with @tronghiep92 's suggestion, i.e.:

<Link prefetch href={{pathname: '/speaker', query: {id: props.id}}} as={`/speaker/${this.props.id}`}>
   <div>some content</div>
 </Link> 

If I'm already on a speaker page and I click a Link that should navigate to another speaker page with a different ID, then the Link tag will not work. In this case, the URL will update but the page does not navigate to the correct speaker. It stays on the current speaker because for some reason Next doesn't rebuild the speaker page with the new ID.

What I am having to do now is just use:

<Link href={speaker/someID} />

The above code will navigate to the correct page but a 404 page briefly flickers before page load because I'm not using query params. At this point I'm thinking that this is a bug with Next?

[viniciusCamargo]

Hi Dani, I think it might be something with the way you're setting your custom server and routes.

Have you checked this repo https://github.com/sergiodxa/next-custom-query/blob/master/server.js#L18?

[voigtd]

@viniciusCamargo Yes, my server (posted above) is using identical routing.

[viniciusCamargo]

Could you share your /speaker component?

[voigtd]

Update:

You need to use the following function, because Next doesn't rebuild when new query params are passed into a dynamic route. I.e. :

static async getInitialProps({ query }) {
    let baseURL = 'some_url';
    const resp = await axios.get(`${baseURL}/speaker?slug=${query.slug}`);
    return { data: resp.data };
  }

This way Next will just update the page with the new query params and your React app can handle the rest with the new props / state.

[timneutkens]

Just dropping this explanation here in case someone will land on this issue: https://github.com/zeit/next.js/issues/2833#issuecomment-414919347

Based on reading the issue I'm not entirely sure it's the same issue. But it doesn't hurt to share the explanation.