Make href property optional for <Link>

[Daiz]

With the recent <Link> behavior rework PR to always make <Link> produce an <a> element, I would like to recommend an additional backwards-compatible change to the <Link> component: make the href property optional. Anchor elements without a href attribute are valid according to specification:

If the <a> element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents. [emphasis added]

(In terms of browser behavior, <a> elements without href are not focusable, so they are basically "disabled links".)

There are many situations where you may want to use conditional links, eg. disabling the current page in a breadcrumb navigation, and right now dealing with such conditional links with the <Link> component is a pain because of the required href property, leading one to write code along the lines of this:

// typeof href = string | undefined
return href ? <Link href={href} passHref><a>{/* content */}</a></Link> : <a>{/* content again */}</a>

While you could certainly define the content separately and conditionally wrap it at the end, ultimately it's all extra busywork than if you were simply able to write code like this:

// typeof href = string | undefined
return <Link href={href}>{/* content */}</Link>

To date, I have been carrying a custom <Link> component across my Next.js project that wraps next/link with two major changes: making it always produce an <a> element as well as making the href property optional. With the <Link> behavior rework PR accounting for the first one, it would be nice if Next.js adopted the second one too so that I could retire my custom <Link> wrapper entirely in favor of the regular next/link.

[JacobGrady]

Agreed. I think it's good for to match the spec for tags, and allow optional href,

[camiaei]

+1, disabling a link shouldn't be that difficult 😩

[rusakovic]

Support this idea!

[toniengelhardt]

+1 nav menus for instance sometimes will have an onClick action instead of a link.