@natu/next-link

Next.js Link component's wrapper

The package contains a wrapper for the next.js link that handles following external links out of the box:

external websites (starting with http),
emails (starting with mailto),
phones (starting with tel).

⚠️

Keep in mind that the option to import default next/link was disabled for all packages but this one using the no-restricted-imports ESLint rule.

Usage

To use this package in the app import this package as a dependency in its individual package.json file:

package.json

"dependencies": {
  "@natu/next-link": "*",
}

Then use it like in the example below:

SomeNiceComponent.tsx

import { ReactNode } from 'react';
 
import { Link } from '@natu/next-link';
 
interface SomeNiceComponentProps {
  href: string;
  children?: ReactNode;
}
 
export const SomeNiceComponent = ({ href, children }: SomeNiceComponentProps) => (
  <section>
    <Link href={href}>{linkText}</Link>
  </section>
);

API Reference

Prop	Type	Default	Description
href	`string`	-	Link address
children	`ReactNode`	-	Any element that should be rendered inside of the Link component
ref	`HTMLAnchorElement`	-	React `Ref`
...props	`NextLinkProps & HTMLAttributes<HTMLAnchorElement>`	-	Other props that can be also passed to `next/link` and `<a />` HTML element

Next API Fetcher Next Themes