[Next.js] 페이지 이동 기능

1. Link (리액트 컴포넌트)

HTML의 a태그 개념을 확장한 것

1) prefetching 지원

뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 프리페칭 기능 지원(사용자가 링크를 클릭하기 전에 데이터를 미리 로드함)

2) route 사이에 'client-side navigation'을 지원

• 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 매우 빠른 사용자 경험(UX)을 제공
• 필요한 JSON 데이터만 서버로부터 가져와서 클라이언트에서 페이지를 재구성하여 렌더링
• 결국 Link 태그는 a 태그를 만들어냄 => SEO(검색엔진최적화) 유리
• 클릭 즉시 페이지 이동
• SPA(Single Page Application) 처럼 동작함

<nav>
   <Link href="/">Home</Link>
   <Link href="/about">About</Link>
   <Link href="/contact">Contact</Link>
   <Link href="/blog">Blog</Link>
</nav>

---

2. useRouter

상단에 "use client" 삽입 필요

import { useRouter } from "next/navigation";
const router = useRouter();
ㄴ "next/navigation"은 13버전 appRouter부터 사용
ㄴ "next/router" 는 12버전까지 사용됐던 pagesRouter에서 사용

• a 태그를 알아차릴 수 없기 때문에 크롤러 입장에서는 해당 요소가 ‘이동을 원한다’라는 것을 알 수 없음 ⇒ SEO(검색엔진최적화) 불리
• 대부분 onClick 같은 이벤트 핸들러에서 사용
• 클릭 후 로직의 순서에 따라 실행하므로, 즉시 이동이 되지 않음

1) history stack

• 방문자의 페이지 방문 순서를 기록하는 시스템
• 웹 사이트 내에서 페이지를 이동할 때, 페이지의 URL이 history stack에 추가됨

2) 4가지 사용법

router.push

: 새로운 URL을 히스토리 스택의 맨 위에 추가

router.replace

: 현재 URL을 히스토리 스택에서 새로운 URL로 대체

router.back

: 사용자를 히스토리 스택에서 한 단계 뒤로 이동, 브라우저의 '뒤로 가기' 버튼을 클릭한 것과 같은 효과

router.reload

: 현재 페이지 새로고침, 히스토리 스택에 영향X, 데이터를 최신 상태로 업데이트하고 싶을 때 사용