Master Next.js Link in Just 5 Minutes (And Avoid This Mistake)
- Next.js Link 컴포넌트의
prefetch
속성은 많은 링크가 있을 때 비용이 많이 들 수 있으므로 false
로 설정하는 것이 좋습니다. 🚫
prefetch: true
는 모든 링크를 미리 가져오고, prefetch: null
은 정적 경로와 다음 로딩 세그먼트의 동적 경로만 미리 가져옵니다. 💡
- Next.js Link 컴포넌트는 코드 분할을 활용하여 성능을 향상시키고,
<a>
태그보다 효율적입니다. 🚀
- Link 컴포넌트는
className
, target
, href
등 <a>
태그의 속성을 모두 지원합니다. 🔗
- 동적 라우팅 및 쿼리 파라미터를 Link 컴포넌트에서 사용할 수 있습니다. 🎯
scroll: false
속성을 사용하면 링크 클릭 시 페이지 상단으로 스크롤되지 않습니다. ⬇️
replace: true
속성을 사용하면 브라우저 히스토리에 이전 페이지가 남지 않습니다. 🔄