Next.js: Wrap <Link> around several components

[fabienheureux]

Hi,

As we can see here: http://w3c.github.io/html/single-page.html#the-a-element
It is valid to have an <a> wrapping several html tags.

But as defined here: https://github.com/zeit/next.js/blob/2.0.0-beta.31/lib/link.js#L92
We can't have multiple children inside a <Link> component.

For example, say I have the following html:

<a>
  <h3>Link text</h3>
  <img />
</a>

The only solution using next.js would be to define a jsx element before calling <Link>, but as React requires to wrap adjacent jsx element in a parent tag, the only way to store the <h3> and <img> tags in a variable would be to add an intermediate level, resulting in:

<a>
  <div>
    <h3>Link text</h3>
    <img />
  </div>
</a>

I know it doesn't seem like such a big deal to have <div> tags wrapping <Link> children, but I think it's not perfect to style these <Link> children, and add (to my mind) some useless complexity.

I don't know next.js well enough (been using it since a week only), so I can't provide an alternative solution, and maybe I got all this wrong, but if some of you have an idea about how we could get use <Link> component with an infinite number of children, it be really great 🙂

Thanks in advance !

[andyngo]

I tried wrapping <Link> around <a> with multiple children element like this and I didn't find any issues with it.

<Link href="#">
  <a>
    <div>Foo</div>
    <div>Bar</div>
  </a>
</Link>

FYI, <Link> is to be used as a wrapper for <a>. You can have as many children you want under <a>.

[fabienheureux]

Well, what I mean by <a> was the <Link> output, maybe I should have write the exact code I tried to run, that is the following:

<Link href="#">
  <h3> Text </h3>
  <img src="path/img.jpg" alt="" />
</Link>

EDIT: didn't see the last line of your comment. Thanks...missed that detail. Closing :)

[timneutkens]

@fabienheureux That behaviour has been deprecated. You should always use <a> in <Link />

[fabienheureux]

Yep got it, makes sense, and solves my initial thought.
I should have triple-read the doc

[timneutkens]

😄 thanks for the feedback!

[rclai]

Is there any reason why we have to put an a tag inside the Link component? Why can't Link simply have an a tag as the parent tag implicitly? It just seems redundant to have to put an a tag inside a Link tag.

[arunoda]

@rclai the reason is you can put anything which has a onClick handler. Like a button or any other custom component.