next/link API must be available as a hook

[maxch-aa]

Goals

1. Provide next/link API as a hook

Non-Goals

No response

Background

The standard API as below is not compatible with component libraries that provide their own <a> implementations.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

The alternative legacyBehaviour is not convenient and is not recommended by the react team.
The cloneElement API, which next/link’s legacyBehaviour attribute relies on, is a legacy React API method and should not be the main route to support anchor components in component libraries. See: reactjs/react.dev#6057

Related discussion: #15560 (comment)

Proposal

The recommended way by React to share functionality is to use hooks: https://react.dev/reference/react/cloneElement#extracting-logic-into-a-custom-hook

Proposed API:

import { useLink } from 'next/link'
import CustomAnchor from 'component-system/anchor';

function MyLink({ label, href }) {
 const anchorProps = useLink({ href });
 return <CustomAnchor {...anchorProps}>{label}</CustomAnchor>;
}

[samselikoff]

We have an answer coming here soon! It will rely on the upcoming Fragment Refs feature coming to React, which avoids a lot of the issues with the {...splatProps} pattern. Until then, we won't fully remove legacyBehavior, so that's the best solution for now.

[tetris-highscore]

Do you have any updates on this?

[jesseflikweerteo]

Is there an update on this?

[icyJoseph]

Hi, not yet, but also the legacyBehavior removal won't happen until this is ready.

[jesseflikweerteo]

Ah, great, thanks, good to know!