The <Link> component is used to navigate between pages in your app.


Links can be rendered by both server and client components.

// src/pages/index.page.tsx

import Link from "@twofold/framework/link";

export default function IndexPage() {
  return (
      <Link href="/about">About</Link>

Just like the <a> tag, the <Link> component accepts an href prop that specifies the URL of the page to navigate to. The only requirement for the href prop is that it must be a page within your application and not an external link.


There are a handful of props that can be passed to the <Link> component to customize its behavior.

hrefstringThe URL of the page to navigate to.
replacebooleanDefault false. If true, the current page will be replaced in the history stack instead of pushing a new entry.
refRef<HTMLAnchorElement>A ref to the underlying anchor element.
childrenReactNodeThe content of the link.