문서 탐색 의미를 유지하며 클라이언트 전환 최적화를 사용합니다.
next/link의 Link는 실제 anchor를 렌더하고 내부 경로를 미리 가져와 빠르게 전환할 수 있습니다. 이동은 button이 아니라 링크 의미를 사용합니다.
현재 페이지, 새 탭, 외부 URL의 보안 속성을 목적에 맞게 구분합니다.
대량 목록의 prefetch 비용은 실제 탐색 가능성과 트래픽을 보고 조절합니다.
onClick과 router.push만 사용해 새 탭 열기와 링크 주소 확인 기능을 잃지 마세요.
로컬 프로젝트에서 확인해보세요query가 포함된 학습 링크를 하나 더 추가하세요.
import Link from "next/link";
export default function Page() {
return (
<main>
<h1>학습 메뉴</h1>
<nav aria-label="강좌">
<Link href="/">홈 새로 보기</Link>{" "}
<a href="https://nextjs.org/docs" target="_blank" rel="noreferrer">
공식 문서
</a>
</nav>
</main>
);
}