Next.js: Pass className into <Link>...</Link>

[matthewmueller]

Would probably be good to pass entire props in actually

<a {...props}>...</a>

[matthewmueller]

oh weird, seems like it does this. not sure what's going on then 😅

[matthewmueller]

Actually, I'm still running into issues with this on latest beta. Doesn't seem to work properly:

import Link from 'next/link'
<Link href='/' className='link'>hi</Link>

Can someone double-check this?

[nkzawa]

@matthewmueller Link component accepts only href and as props. You can set className to a.

<Link><a className="link">hi</Link>

[matthewmueller]

Ahh okay, so would this:

<Link as="/hello"><a href="/hi" className="link">hi</a></Link>

resolve to: <a href="/hi" className="link">hi</a> with the <Link /> logic in place?

[rauchg]

I'm pretty sure we should deprecate <Link>text</Link> for 2.0. (PR welcome)
It should just be HOC so that we can statically access (and decorate) children with styled-jsx, but also useful for css-in-js in general

[rauchg]

Also @matthewmueller that /hi would only apply to things like "command+click" on the link (and I'm not 100% sure if we'll overwrite it anyways, but we probably shouldn't). If what you want is to _use_ a certain page, but _decorate_ it differently in navigation, you want <Link as>

[impronunciable]

As @rauchg stated we are deprecating <Link>text</Link> so the className should be applied always to the <a> tag

[matthewmueller]

I'm sorry but I'm still a little confused about this. Is the idea that you'd never add an href the the inside <a> tag? Or are there cases where you'd want to?

[rauchg]

We do pass down the href from <Link> to the case where you have an <a> child. What we're deprecating is inserting an <a> automagically.

You should be able to <Link><img /></Link> and no <a> is created, for example

[matthewmueller]

Got it – thanks!