Next.js: Allow next/link to pass through additional props on the anchor tag

[pruhstal]

Feature request

Hi there. I've noticed that Link from next/link doesn't support additional props being passed through. https://github.com/zeit/next.js/blob/canary/packages/next/client/link.tsx#L49

In an effort to take advantage of the itemListElement microdata from schema.org, I'd like to attach itemprop="item" to the anchor.

https://schema.org/itemListElement

Is your feature request related to a problem? Please describe.

Not having this prevents valid microdata markup.

Describe the solution you'd like

To have any additional props be passed through to the Link component (...rest).

Describe alternatives you've considered

Something like:

<a href={item.href} onClick={this.handleClick}>
  <span itemProp="name">{item.text}</span>
</a>

handleClick = (e) => {
  e.preventDefault();
  Router.push(href, as);
}

would probably work, but I'd just like to have the component support additional props out of the box.

Additional context

N/A.

[kachkaev]

<Link href="...">
  <a itemProp="...">link text</a>
</Link>

[huv1k]

Hey @pruhstal, you can do it as @kachkaev suggested. If you want to create a component with microdata passing you can do something like this:

const MicrodataLink = ({ href, children, ...rest }) => (
  <Link href={href}>
    <a {...rest}>{children}</a>
  </Link>
)

Then using it like this:

<MicrodataLink href="/" itemProp="itemListElement">
  Link
</MicrodataLink>