Next.js 링크 hover 시점에 prefetch 기능 비활성화하기

https://github.com/vercel/next.js/discussions/11793 이거는 도움이 안되나요?

Link.tsx 로 콤포넌트를 아래처럼 옵션을 추가해 만드시고, 임포트해서 사용하시면 됩니다

1
2
3
4
5
import NextLink from 'next/link'
export default (props: any) => {
const {...rest} = props
return <NextLink prefetch={false} {...rest} />
}

Next.js에서는 링크의 prefetch 기능을 비활성화하려면 'Link' 컴포넌트를 사용하지 않고 직접 'a' 태그를 사용하여 링크를 만들어야 합니다. 이렇게 하면 브라우저가 기본 동작으로 hover 시점에 prefetch를 하지 않습니다. 그리고 Next.js의 'useRouter' 훅을 사용하여 프로그래밍 방식으로 페이지 이동을 처리할 수 있습니다. 예를 들어, 다음과 같이 a 태그와 useRouter를 사용하여 링크를 생성하고 클릭 이벤트를 처리할 수 있습니다 이렇게 'CustomLink' 컴포넌트를 만들면 이 컴포넌트를 사용하는 링크에서는 hover 시점에 prefetch가 발생하지 않습니다. 이 방법은 'Link' 컴포넌트의 일부 기능을 포기해야 하는 단점이 있습니다. 하지만, 만약 hover 시점의 prefetch를 아예 비활성화하고자 한다면 이 방법을 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useRouter } from 'next/router';

function CustomLink({ href, children }) {
  const router = useRouter();

  const handleClick = (event) => {
    event.preventDefault();
    router.push(href);
  };

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

export default CustomLink;