[Next.js] Link 태크 속성 4가지

현재 상황

Link 태그를 통해 내가 원하는 주소로 이동 시키고 싶다.

참고) https://nextjs.org/docs/pages/api-reference/components/link

Link 태그 속성 4가지

• href
• replace
• scroll
• prefetch

href

이동속성
1) 문자열로 이동해야 하는 url 혹은 path를 써준다.

<Link href="/dashboard">Dashboard</Link>

2) 객체도 가능하다.

//  /about?name=test 로 이동 
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

replace

• 브라우저 기록 스택에 새로운 URL 대신 현재 주소를 넣는다.
• default 값으로 false.

import Link from 'next/link'
 
export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

scroll

• 새로운 루트의 상단쪽으로 스크롤 되어 있거나 스크롤을 앞뒤로 할 수 있도록 한다.
• default 값으로 true

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

prefetch

• 백그라운드에서 페이지를 미리 fetch 해온다.
• 클라이언트 측 탐색 성능 향상
• default 값으로 true

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