내부 이동은 Link, 이벤트 이후 이동은 useRouter, 외부 이동은 a로 나눈다
페이지 이동을 만들기 전에 목적지가 내부 라우트인지, 사용자 이벤트 뒤에 이동하는지, 브라우저 기본 동작이 필요한지부터 정한다.
| 상황 | 기본 선택 | 이유 | 주의할 점 |
|---|---|---|---|
| 내부 페이지 이동 | <Link href="/about"> | 클라이언트 탐색과 프리페치 활용 | Link 안에 a 태그를 다시 넣지 않음 |
| 동적 상세 페이지 | <Link href={`/products/${id}`}> | 실제 URL 문자열로 이동 | id 값이 비어 있지 않은지 확인 |
| 폼 제출 후 이동 | useRouter().push() | 검증·저장 이후 명령형 이동 | client component에서만 사용 |
| 외부 사이트 | <a href="https://..."> | 브라우저 기본 링크가 자연스러움 | target/rel 보안 속성 확인 |
| 다운로드/파일 | <a download> | 파일 다운로드 기본 동작 사용 | 앱 내부 라우팅으로 처리하지 않음 |