NextLink legacyBehavior depreciated and removed in next 16, but no replacement

[matthew-gladman-oua]

Summary

It's been noted that in NextLink, legacyBehavior is going to be removed in Next 16 and will pop up with an error warning of that fact.

But there doesn't seem to be a suitable replacement for having Next internal linking behavior and custom components. passHref does work, but the parent <a> remains, which is invalid HTML.

The docs still recommend using legacyBehavior for this as seen here:
https://nextjs.org/docs/app/api-reference/components/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag

Am I missing something? What are people doing instead? Are they using useRouter for linking instead?

Additional information

Example:

Component:

const LinkButton = styled.a`
   // ... some styles
`

What we do today:

<NextLink href={'/example'} passHref legacyBehavior>
    <LinkButton>Click me</LinkButton>
</NextLink>

/*
Produces:
<a href="/example" class="sc-example">Click me</a> ✅
*/

Removing legacyBehavior or using the forwardedRef method:

<NextLink href={'/example'} passHref>
    <LinkButton>Click me</LinkButton>
</NextLink>

/*
Produces:
<a href="/example">
    <a class="sc-example">Click me</a> ❌
</a>
*/

[icyJoseph]

Wouldn't you be able to do:

        <LinkButton as={NextLink} href="/about">Click Me!</LinkButton>

[SamulionisJonas]

That could work in this specific case, but it feels more like a workaround than a robust solution—especially when considering support for other frameworks or design systems.

[matthew-gladman-oua]

I forgot to respond, this does work! I wasn't aware of the as={} feature of Styled Components.

But as @SamulionisJonas mentioned, this is a more specific SC feature

[icyJoseph]

More will follow. #76329 (comment)