Next Link

Alternatives

• @reckon-web/universal-tanstack-router-link

The NextLink component has been deprecated and will be removed in a future version. Use Link instead.

- <Button
-   as={NextLink}
-   href="/"
-   label="A link that looks like a button"
- />
+ <Button
+   as={Link}
+   href="/"
+   label="A link that looks like a button"
+ />

Next's Link makes it easy to create "links" that don't actually use anchors so we provide a link component with a slightly different API that forces the usage of an anchor tag. You should always use the components in this package instead of Next's Link. This is enforced in reckon-frontend with a lint rule.

NextLink

Instead of adding event handlers and sometimes an href to the child element, Reckon's NextLink renders an anchor itself.

import { NextLink } from '@balance-web/next-link';

function MyComponent() {
  return <NextLink href="/">A Next link</NextLink>;
}

Button

You can pass the NextLink to the as prop on a Button to make a link that looks like a button.

import { NextLink } from '@balance-web/next-link';
import { Button } from '@balance-web/button-deprecated';

function MyComponent() {
  return (
    <Button as={NextLink} href="/" label="A link that looks like a button" />
  );
}

TextLink

You can pass the NextLink to the as prop on a TextLink to make a link that looks correct in text.

import { NextLink } from '@balance-web/next-link';
import { TextLink } from '@balance-web/text';

function MyComponent() {
  return (
    <TextLink as={NextLink} href="/">
      A link
    </TextLink>
  );
}