<Link>

link 사용시 주의점

1. import 할 것

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

 

 

2. 뒤로가기 안되게 하고 싶으면(history에 안쌓음) replace 추가

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

 

 

3. scroll 기억하고 싶으면 scroll={false} 추가: 기본값(true)은 최상단으로 올라감

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}

 

 

4. 뷰포트에 보이는 요소중 Link에 해당하는 친구들 사전로딩 해제하고 싶으면 prefetch={false}

 

기본 동작
prefetch 옵션의 기본값은 true입니다. 즉, 기본적으로 모든 Link 컴포넌트는 연결된 페이지를 백그라운드에서 미리 불러오려고 시도합니다. Next.js는 뷰포트(Viewport) 내에 있는 모든 Link 컴포넌트를 감지하고, 이들이 가리키는 페이지를 자동으로 prefetch합니다. 사용자가 스크롤하여 새로운 링크가 뷰포트에 들어오면, 해당 페이지도 prefetch됩니다.

 

Prefetch 비활성화
특정한 상황에서는 사전에 페이지를 불러오는 것이 바람직하지 않을 수 있습니다. 예를 들어, 트래픽이 많은 사이트에서는 서버에 부담을 줄이기 위해 이 기능을 비활성화할 수 있습니다. prefetch={false}를 Link 컴포넌트에 전달하면, 해당 링크에 대한 자동 prefetch 기능을 비활성화할 수 있습니다.

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  )
}