Docs

ComponentsSafe Link

Safe Link

A component that wraps next/link

A component that wraps next/link and handles external links in the document.

Usage

Same as using <a>.

import { SafeLink } from 'next-docs-zeta/link'
 
<SafeLink href="/docs/components">Click Me</SafeLink>

Dynamic hrefs

Dynamic hrefs are no longer supported in Next.js App Router. Safe Link can handle dynamic hrefs by enabling dynamicHrefs.

<SafeLink href="/[lang]/components" dynamicHrefs>
  Click Me
</SafeLink>

Contentlayer

You can pass it as a component in <MDX>.

//in a server component
import { SafeLink } from 'next-docs-zeta/link'
 
const MDX = getMDXComponent(code)
 
return (
  <MDX
    components={{
      a: SafeLink
    }}
  />
)

Last updated on

Breadcrumb

Sidebar

On this page

UsageDynamic hrefsContentlayer
Edit on Github