페이지 생성과 Link 연결

경로 우선 생성

app/about/page.tsx처럼 segment와 page를 만들면 /about 경로가 생긴다.

내부 이동은 a 태그만 쓰기보다 Next의 Link를 사용해 클라이언트 전환과 prefetch 이점을 얻는다.

사용자가 어느 섹션에 있는지 pathname 기준으로 navigation 상태를 보여 준다.

href

정확한 목적지 동적 segment나 query를 조립할 때 오타가 곧 404로 이어진다.

상수화가 도움이 된다.

prefetch

체감 속도 viewport 안의 링크를 미리 준비해 이동을 빠르게 만든다.

과도한 링크 수는 비용이 된다.

active

탐색 맥락 현재 pathname과 nav item을 비교해 상태를 표시한다.

client component 경계가 필요할 수 있다.

focus

접근성 의미 있는 링크 텍스트와 키보드 이동 순서를 유지한다.

아이콘만 있는 링크는 라벨이 필요하다.

404 추가한 Link의 href가 실제 page 경로와 일치하는가.

클라이언트 경계 pathname을 읽는 nav만 client로 올리고 전체 layout을 불필요하게 client화하지 않는가.

라벨 링크 텍스트만 보고 목적지를 알 수 있는가.

import Link from 'next/link';

<Link href="/dashboard/settings">설정</Link>