Next Link

Next Link is a link component that uses TanStack Router's Link with MUI's Link styling. It renders as an in-app navigation link with hover underline and optional linkText or children.

Use it for internal routes so navigation stays in the React app without a full page reload. The link uses the to prop as href and applies the next-btn-link class.

Import

import { NextLink } from '@js-smart/react-kit';

Basic usage

<NextLink href="/dashboard" linkText="Go to Dashboard" />

With children

<NextLink href="/settings">Settings</NextLink>

With target and aria-label

<NextLink
  href="/help"
  linkText="Help"
  target="_self"
  ariaLabel="Open help page"
/>

Accessibility

Set ariaLabel when the visible text is not descriptive enough for screen readers.

Peer dependencies

NextLink uses MUI's Link and TanStack Router's Link. Ensure your project has @mui/material and @tanstack/react-router installed (see Installation).

Props

Prop	Type	Default	Description
href	string	—	Required. Target path (passed to TanStack Router as to).
linkText	string	—	Link label. If omitted, children is used.
target	string	—	Optional target (e.g. _blank).
children	ReactNode	—	Link content when linkText is not set.
ariaLabel	string	—	Accessible label for the link.