Next.js: Open link in new tab incompatible with <Link/> component

[emilsjolander]

Bug report

Open link in new tab feature is incompatible with <Link/> component when using dynamic routing.

Describe the bug

When choosing to open a link in a new tab/window the user is not sent to the same URL as they are when just clicking to follow a link. Instead the user is brought to a location matching the location of the route in the pages directory.

To Reproduce

Render a Link component which links to a dynamic page route. For example

<Link href="/teams/[id]/members" as="/teams/123456/members">
  View members
</Link>

When clicking this link we are correctly routed to /teams/123456/members however if right clicking this link and choosing "Open link in new tab" we are wrongly routed to /teams/[id]/members which obviously is not what we want.

Expected behavior

Clicking on a link and choosing to open link in new tab should navigate the user to the same location.

System information

• OS: macOS
• Browser: Safari
• Version of Next.js: 9.0.7

Additional Context

Documentation for Link usage with dynamic routes: https://nextjs.org/docs#dynamic-routing

[timneutkens]

Based on your reproduction description I had @lfades create a repo: https://github.com/lfades/next-dynamic-routes-test

As you can see the href is set correctly and the behavior works exactly as intended, right clicking open in new tab as seen here: https://next-dynamic-routes-test.fades.now.sh/

Can you provide a full reproduction?

[emilsjolander]

Yup clearly works there. Investigating more into why a similar example doesn't work within our app and I'll try creating a minimal repro.

[emilsjolander]

Ok found the error. The wrapped a tag wasn't being passed an href due to being styled with styled components and we were propagating it manually my accident. Adding passHref to the Link tag fixed it.