I have this in my code:
import NextLink from 'next/link'
import ExternalLink from './External'
type PropsType = typeof NextLink & {
href: string
children: React.ReactNode
}
export default function Link(props: PropsType) {
return <NextLink {...props} />
}
Link.External = ExternalLink
I want to do that to simply start creating an API for links which does some extra stuff on top of Next.js's next/link. The ExternalLink (for completeness) is just this:
import React from 'react'
type ComponentPropsType = React.HTMLProps<HTMLAnchorElement> & {
children: JSX.Element
href: string
}
export default function Component({
href,
children,
...attrs
}: ComponentPropsType) {
return <a {...attrs} target="_blank" rel="noreferrer" href={href}>{children}</a>
}
I am not using the ExternalLink for this question, I am simply using a regular link, like this:
<Link href="/foo">Foo</Link>
However, I am getting this error:
Property '$$typeof' is missing in type '{ children: string; href: string; }' but required in type 'ForwardRefExoticComponent<Omit<AnchorHTMLAttributes, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>'.ts(2741)
The Next.js link.d.ts looks like this when clicking through on VSCode:
/// <reference types="node" />
import React from 'react';
import { UrlObject } from 'url';
declare type Url = string | UrlObject;
declare type InternalLinkProps = {
href: Url;
as?: Url;
replace?: boolean;
scroll?: boolean;
shallow?: boolean;
passHref?: boolean;
prefetch?: boolean;
locale?: string | false;
legacyBehavior?: boolean;
/**
* requires experimental.newNextLinkBehavior
*/
onMouseEnter?: (e: any) => void;
/**
* requires experimental.newNextLinkBehavior
*/
onTouchStart?: (e: any) => void;
/**
* requires experimental.newNextLinkBehavior
*/
onClick?: (e: any) => void;
};
export declare type LinkProps = InternalLinkProps;
declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & {
children?: React.ReactNode;
} & React.RefAttributes<HTMLAnchorElement>>;
export default Link;
What am I doing wrong, and how do I properly type it to extend it like this?
