Router links

A component that renders a link renders a plain <a> by default. To go through a router — Next’s Link with its prefetching, or any other — pass the router’s link in one of two ways.

Quick path

The component…	Use	Example
is one link (Button, a link card, a menu item)	asChild	<Button asChild label="Go"><Link href="/x" /></Button>
renders several links from data (a trail, a menu)	linkAs	<Breadcrumbs linkAs={Link} items={items} />

Both work in Server Components: no state, no hooks.

asChild

The component renders its one child element instead of its own <a>. The child brings the element and its routing props (href, prefetch, scroll…); the component brings its classes, content, attributes, handlers and ref.

See servicesRead the guide

import Link from 'next/link';
import { Button } from '@zitdevs/ui';

<Button asChild label="See services" icon="arrow-right">
  <Link href="/services" />
</Button>;

• The child’s own children are replaced by the component’s content: the label and the icon stay the component’s, so the name never drifts from the look.
• Classes merge with cn(), the child’s last, so a className on the child can place it.
• Both onClick handlers run, the child’s first; both refs receive the element.
• A disabled Button still renders <button disabled>, never the link: a link cannot be disabled.

Build one: Slot

asChild is the kit’s Slot, exported for an app’s own components. It renders its one child with its props merged in, by the rules above. It is a plain cloneElement, with no dependency.

import { Slot, cn } from '@zitdevs/ui';

function Card({ asChild, className, ...props }) {
  const Root = asChild ? Slot : 'a';
  return <Root {...props} className={cn('block rounded-sm', className)} />;
}

linkAs

A component that renders several links from its data takes the link component instead, and gives it href, className, children and anchor attributes such as aria-current and hrefLang.

1. Home/
2. Services/
3. IT audit

import Link from 'next/link';
import { Breadcrumbs } from '@zitdevs/ui';

<Breadcrumbs linkAs={Link} items={items} />;

Its type is LinkComponent (ElementType<LinkProps>): any component that accepts an href string and passes the rest to its <a>, which Next’s Link does.