#How can I disable prefetch of Link component in app router

3 messages · Page 1 of 1 (latest)

serene rune
#

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

plain heathBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

serene rune
#

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;