Link (theme-ui) vs Link (Next.js)

[tarikmiljkovic]

Hello Community,

would you please tell me, how do you manage to use both of them, the Link from theme-ui, and the Link from Next.js?
They have the same name, and that is the issue in my case.

For example, I want to add a Variant on my Link, but I can not add a Variant on Next.js Link which I also need for routing.

[hasparus]

Hey @tarikmiljkovic! They're actually 100% compatible, modulo the name, as Next's Link does not concern itself with presentation, while our Link doesn't have any routing logic.

It should look more or less like the following:

import RoutingLink from 'next/link';
import { Link as PrettyLink } from '@theme-ui/components';

const _ = (
  <RoutingLink href="/somewhere">
    <PrettyLink>Go somewhere</PrettyLink>
  </RoutingLink>
)

Of course, you can build your own Link component using these two, passing navigation props onto Next's Link and spreading everything else onto Theme UI's Link.

The API above is possible, because Next's link doesn't render any anchor tags on its own, instead it uses React.cloneElement to augment its child.