How can I disable prefetch of Link component in app router

Question

I want to disable it or set the default to false over the entire app instead of adding prefetch={false} to every <Link> usage
I prefer to change the default to false rather than disable it completely

I tried doing this:

"use client";

import NextLink, { LinkProps } from "next/link";

interface CustomLinkProps extends LinkProps {}

const CustomLink: React.FC<CustomLinkProps> = ({
  prefetch = false,
  ...props
}) => {
  return <NextLink prefetch={prefetch} {...props} />;
};

export default CustomLink;

But I get the following error:

Warning: Invalid prop `asChild` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
..... a bunch of directories are printed here .....
RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)

And when I go back to using the next/link instead if the above custom component the errors go away

Black carp · Accepted Answer

Turns out the redirects error are related to a different issue that I now solved, but the TS errors still didn't go away so I changed the implementation to the following and now everything seems to work:

import NextLink from "next/link";
import { ComponentProps } from "react";

interface CustomLinkProps extends ComponentProps<typeof NextLink> {}

const CustomLink = ({ prefetch = false, ...props }: CustomLinkProps) => {
  return <NextLink {...props} prefetch={prefetch} />;
};

export default CustomLink;

How can I disable prefetch of Link component in app router

1 Reply