How can I disable prefetch of Link component in app router
Answered
Black carp posted this in #help-forum
Black carpOP
I want to disable it or set the default to false over the entire app instead of adding
I prefer to change the default to false rather than disable it completely
I tried doing this:
But I get the following error:
And when I go back to using the
prefetch={false}
to every <Link>
usageI 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 awayAnswered by Black carp
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;
1 Reply
Black carpOP
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;
Answer