How to Use Next.Js "Link" element as a custom React component with Typescript

Question

I've tried to use "Link" element as my custom react component that I modified it with typescript to add some more facilities but everytime used it in my project it's made me to write a property with the name of props which its included some other properties :

below line is my typescript runtime error :

Type '{ link: string; title: string; }' is missing the following properties from type 'DetailedReactHTMLElement<{ onMouseEnter?: MouseEventHandler<Element> | undefined; onClick?: MouseEventHandler<Element> | undefined; href?: string | undefined; ref?: any; }, HTMLElement>': type, ref, props, keyts(2739)

I wrote my custom react component :

import style from "./Button.module.css";
import Link from "next/link";
export const Button: React.FunctionComponent<
  React.DetailedReactHTMLElement<
    {
      onMouseEnter?: React.MouseEventHandler<Element> | undefined;
      onClick?: React.MouseEventHandler;
      href?: string | undefined;
      ref?: any;
    },
    HTMLElement
  > & {
    title?: string;
    link?: string;
  }
  > = ({ title, children, link, ...rest }) => (
  <Link href={`${link}`} {...rest}>
    {title ?? children}
  </Link>
  );

when I using it somewhere as my Button :

<Button link={exploreLink} title="Explore Event" />

Sean W · Accepted Answer · 2021-11-06 05:40:03Z

16

A few points to note so you know what's going on...

Your losing all Next/link attributes (as, shallow, passHref,replace , etc.)
You are missing the required anchor tag inside of next/link
Next link has its own type - LinkProps
link as a prop name is confusing as the standard is href and it's already included
LinkProps hold all standard next/link props;
FC is react's built in functional component - adds children prop and sets return to a ReactElement|null
HTMLProps are react's built in synthetic events and react specific props
HTMLAnchorElement adds all standard html props like className, title, etc.

import NextLink, { LinkProps } from 'next/link';
import { HTMLProps, FC } from 'react';

const LinkButton: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({
  as, children, href, replace, scroll, shallow, passHref, ...rest
}) => (
  <NextLink
    as={as}
    href={href}
    passHref={passHref}
    replace={replace}
    scroll={scroll}
    shallow={shallow}
  >
    <a {...rest}>
      {children}
    </a>
  </NextLink>
);

If your adding custom props you could make your own type

import { MouseEvent, HTMLProps, FC } from 'react';

type MyLink = {
 customProp?: string;
} & LinkProps & HTMLProps<HTMLAnchorElement>;

LinkButton: FC<MyLink> = ({ onClick, ...rest }) => {
 const customClick = (event: MouseEvent<HTMLAnchorElement>)={
 }
 ....
}

Usage

<LinkButton href={exploreLink} title="Explore Event" />

edited Nov 6, 2021 at 5:40

answered Nov 5, 2021 at 15:04

Sean W

6,74623 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Bidjandy Over a year ago

Wow this is amazing respond , well I've changed my accepted answer

Gabe Over a year ago

Great answer. One update is now HTMLProps<HTMLAnchorElement> should be replaced with Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> & LinkProps

Safwat Fathi Over a year ago

@Gabe that is clever

jmk · Accepted Answer · 2021-11-05 14:01:13Z

1

You don't need React.DetailedReactHTMLElement; try:

React.FunctionComponent<
    {
      onMouseEnter?: React.MouseEventHandler<Element>;
      onClick?: React.MouseEventHandler;
      href?: string;
      ref?: any;
    }
  & {
    title?: string;
    link?: string;
  }
>

answered Nov 5, 2021 at 14:01

jmk

1,6308 silver badges19 bronze badges

2 Comments

Ali Bidjandy Over a year ago

that's it and for final question how about the className , how should I add this property to my custom button while there's not a property for add a class name to "Link" Next.Js

jmk Over a year ago

github.com/vercel/next.js/issues/272

Collectives™ on Stack Overflow

How to Use Next.Js "Link" element as a custom React component with Typescript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related