Next.js: <Link> doesn't work with custom components?

[ianstormtaylor]

Bug report

Describe the bug

The <Link> component doesn't appear to pass on the href prop when wrapping a custom component instead of the native <a>.

To Reproduce

Here's a CodeSandbox: https://codesandbox.io/s/nextjs-qtynp

I made sure to use React.forwardRef.

Expected behavior

Both of the links should have their href props populated.

System information

• OS: macOS
• Version of Next.js: 9.1.2
• Version of React: 16.11.0

Additional context

It sounds unlikely that this is broken, since I assume this is one of the most commonly used codepaths. But I keep trying everything and nothing seems to work, so I figured I'd open this.

[prichodko]

Pass passHref prop to <Link /> component. More info here.

[ianstormtaylor]

Ahhhh, wow thank you @prichodko!

For the maintainers, I would seriously consider changing how <Link> works. The current href/onClick passing is really magic-y and hard to wrap your head around if you are doing anything other than a simple <a> element. It's kind of crazy right now that there's a failure case where everything appears to work while clicking around, and you only notice it if you happen to inspect the DOM and see that href= is missing, or notice that cursor: pointer isn't active.

I think it would be much easier to understand if it used a render-prop-based API where you did the passing yourself.

[Timer]

Feature request is duplicate of #8207 after OP issue was fixed.

[ianstormtaylor]

Just got stumped by this again when needing to work with Next.js again after some time away from it. I'd recommend adding something to main routing the docs about passHref, because using custom components seems like the 90% use case for React apps IMO. Very unintuitive and easy to miss that it's broken. I imagine a lot of people must either (a) have broken links in their apps without realizing it, or (b) had to spend lots of time figuring out why the magic was failing.