Does Link support nextjs prefetch?

[tetslee]

Just wondering if nextui Link component supports nextjs Link props, especially the prefetching/preloading that nextjs Link does: https://nextjs.org/docs/app/api-reference/components/link#prefetch

If not out of the box, then what's the recommended way to get nextui Link styling with nextjs Link behaviour?

[tetslee]

AFAIK it's not out of the box support, should nextjs consumers just use a custom implementation for all links then?

import { forwardRef } from "react";
import { LinkIcon } from "@nextui-org/shared-icons";
import { linkAnchorClasses } from "@nextui-org/theme";

import { LinkProps as UIProps, useLink } from "@nextui-org/react";
import { default as NextLink, LinkProps as NextProps } from "next/link";

const Link = forwardRef<HTMLAnchorElement, UIProps & NextProps>(
  (props, ref) => {
    const {
      children,
      showAnchorIcon,
      anchorIcon = <LinkIcon className={linkAnchorClasses} />,
      getLinkProps,
    } = useLink({
      ...props,
      ref,
    });

    return (
      //@ts-expect-error getLinkProps type is missing anchor element props
      <NextLink {...getLinkProps()}>
        <>
          {children}
          {showAnchorIcon && anchorIcon}
        </>
      </NextLink>
    );
  }
);

Link.displayName = "AppLink";

export default Link;

(untested, modified from https://nextui.org/docs/components/link#custom-implementation)

[J4v4Scr1pt]

I faced the same issue but solved it with the as prop:
#3052 (comment)