link to dynamic route with query params not working client-side

Bug report

Note there are 4 similar issues but I think none of them is duplicate.

Describe the bug

I think it’s not possible to create a Link for dynamic route with query params in a way which would work both server-side & client-side.

To Reproduce

• create /pages/[id].js
• const { query: { id, foo } } = useRouter()
• console.log(id, foo)
• create /pages/index.js
• <Link href="/[id]" as={{ pathname: '/123', query: { foo: 'bar' } }}><a>...
  • this way, it doesn’t propagate to client-side (only id is available, foo is undefined)
• <Link href={{ pathname: '/123', query: { foo: 'bar' } }}>...
  • this seems to work but it also does request to /pages/123.js and that throws 404 which in turn does full-page reload which actually shows what’s expected (but it’s super-ugly and much slower as it’s just SSR result and not regular client-side route transition)

Expected behavior

I’d expect href="/[id]" as={{ pathname: '/123', query: { foo: 'bar' } }} to work with both client-side routing and prefetching (if I understand correctly what that 123.js request is)

System information

• OS: macOS
• Browser: latest Chrome
• Next.js: 9.2.2-canary.15

[Janpot]

What happens when you do

<Link 
  href={{ pathname: '/[id]', query: { foo: 'bar' } }} 
  as={{ pathname: '/123', query: { foo: 'bar' } }}
><a>...

?

[milesrichardson]

I was also having this problem, but it was due to a misunderstanding of required link props. The docs (https://nextjs.org/docs/api-reference/next/link) are not very clear about this IMO.

In my case I have a variable called endCursor on a page called [namespace].js and I want the URL to be /[namespace]?after=${endCursor}. To make a link to this page work with both SSR and CSR, you need to pass the fully qualified props to as and href like so:

// This works
const nextLinkProps = {
  as: {
    pathname: `/${namespace}`,
    query: {
      after: endCursor,
    },
  },
  href: {
    pathname: "/[namespace]",
    query: {
      after: endCursor,
    },
  },
}

What I was doing before, which did NOT work:

// This does NOT work (CSR fails as described in this issue)
const badLinkProps = {
  as: {
    pathname: `/${namespace}`,
    query: {
      after: endCursor,
    },
  },
  href: '/[namespace]'
}

I hope this helps someone in the future.