Link

A thin wrapper around next/link that understands both plain URLs and the structured LinkField produced by your linkField utility.

What it does

It decides at runtime whether to render:

• <NextLink> (default for internal routes)
• <a> (for external / custom URLs)
• <Button asChild> (when a LinkField specifies a button-style appearance)
• <span> (fallback when no valid URL is available)

Use it anywhere you might otherwise drop a raw <NextLink>—it just happens to pair perfectly with linkField.

Examples

Solid color background

import Link from '@/components/Link'

/* 1 — Internal route */
<Link href="/about">About us</Link>

/* 2 — External URL */
<Link href="https://github.com">GitHub</Link>

/* 3 — Link stored in Payload (renders <a> or <NextLink>) */
<Link linkFieldProps={hero.link} />

/* 4 — Button appearance saved in the CMS */
<Link linkFieldProps={cta.link} size="lg" />

Custom background element

Good to know

• Prefetching is skipped for custom URLs that start with / to avoid Next.js  cross-domain fetch warnings.
• If linkFieldProps.newTab is true, the component adds target="_blank" and the appropriate rel.
• When neither href nor a valid linkFieldProps URL is present, the component renders a <span> so the layout doesn’t break.