Support for Polymorphic Paste link components

[stern-shawn]

Hi team!

Currently in Twilio Docs (a Next.js app), we need to follow a pattern like this to get Next.js client-side linking to work instead of having the native <a> tag full page reload experience:

import Link from 'next/link';
// ...
<Link href="/code-exchange" passHref legacyBehavior>
  <BreadcrumbItem href="">Home</BreadcrumbItem>
</Link>

// another example
<Link {...props} href={href} passHref legacyBehavior>
  <Anchor href={href}>
    {children}
  </Anchor>
</Link>

This works at the moment, but now that we've updated to Next.js 15 we're getting a warning that legacyBehavior will be deprecated in version 16, and to start migrating off. I tried, but Paste components don't retain the SPA link experience or fail to render without the given href property.

In other UI libraries that I'm used to, there's some form of API for providing a component to render in place of a given component's default output. For example:

// mantine UI: https://mantine.dev/core/anchor/#polymorphic-component
import Link from 'next/link';
import { Anchor } from '@mantine/core';

<Anchor component={Link} href="/example">
  Example!
</Anchor>;

// material UI: https://stackoverflow.com/a/74419666
import Link from '@mui/material/Link';
import Link as NextLink from '@mui/material/Link';

<Link component={NextLink} href="/go-here">
  Click me!
</Link>

Paste already exposes a partial version of this with the as prop that lets us do things like <Box as="li" /> or <Button as="a">, and it'd be lovely to maybe extend that idea (at least on Paste components that default to rendering as a since React apps have a tendency to need custom routing), ex:

<BreadcrumbItem href="/docs" as={Link}>Home</BreadcrumbItem>

<Anchor href={href} as={Link}>
  {children}
</Anchor>

Let me know if that makes sense and is realistic, or if I'm missing something that we could more easily change now on our end 😄

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

An error occurred with your deployment

FUNCTION_INVOCATION_TIMEOUT

sfo1::vtl7h-1751567077735-96ceb694af73

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Use Anchor in react-router-dom Link - Answer (updated: 05/08/2023, similarity score: 88%)
• In page navigation vs Tabs question - Answer (updated: 10/11/2023, similarity score: 88%)
• Use Anchor in react-router-dom Link (updated: 05/08/2023, similarity score: 88%)

[dosubot[bot]]

Paste's as prop only supports HTML elements (like "a", "button", "div") and does not accept custom React components such as Next.js Link. This is enforced by the type definition (keyof JSX.IntrinsicElements), so you can't currently use as={Link} on Paste components like Anchor or BreadcrumbItem. There isn't an official workaround or recommended pattern from the Paste team for integrating with Next.js Link after legacyBehavior is removed, and there are no signs of ongoing work to add this support in the repo or docs [source].

Other UI libraries (like Mantine and MUI) support a polymorphic component prop for this use case, but Paste does not at this time. For now, the best workaround is to create a custom wrapper component that composes Next.js Link and the Paste component, or to use Next.js Link directly and style its child to match Paste's design.

If this is a blocker, it may be worth keeping an eye on the repo for future updates, since this is a common need in React/Next.js projects.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[roxanagomez]

Hey @stern-shawn thank you for sharing this we will discuss this and get back to you in a bit. Also, Can you fill out a dependency request for this?

[stern-shawn]

Form submitted, thank you!

[krisantrobus]

Hi @stern-shawn, this is a conversation that comes up fairly often. I think this is something that is feasible as the Link component extends the native HTML <a> element. I think it would make sense from an API perspective to keep the as prop separate and go down the route of component given in the examples.

Which components exactly are you looking to have this functionality? Both Breadcrumb and Anchor?

[stern-shawn]

Anchor would be a good generic start and is probably 80% of our usage!

Basically, any of Paste's components which are effectively <a> wrappers would be ideal, and elements that dynamically become Anchors when passed as='a' and/or an href such as BreadcrumbItem, Button, etc. Here are some that we're using based on searching through the docs repo's components and where we're using legacyBehavior at the moment. There are probably more, but these are what are in use 😄 :

• Anchor
• Badge
• BreadcrumbItem
• Button
• InPageNavigationItem
• SidebarHeaderIconButton
• SidebarNavigationItem

Also want to emphasize that there's no big rush on this. It's currently just a source of dev-only warnings and we don't have a timeline for when Next.js 16 is even going to be released / if we have any incentive to migrate to it soon after it does drop.