네비게이팅 방식

---

1. 페이지 이동

1-1. Link

<header>
  <Link href={"/"}>index</Link>
  <Link href={"/search"}>search</Link>
  <Link href={"/book/1"}>book/1</Link>
</header>

1-2. Programmatic Navigation

사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족했을 경우에 어떤 함수 내부에서 페이지를 이동시키는 방법

import { useRouter } from "next/router"; // 페이지 라우터 버전
import { useRouter } from "next/navigation"; // 앱 라우터 버전

export default function App() {
  const router = useRouter();

  const onClickButton = () => {
    router.push("/test");
  };

  return (
    <div>
      <button onClick={onClickButton}>/test 페이지로 이동</button>
    </div>
  )
}

2. Pages Router와 App Router에서의 차이점

2-1. Pages Router

• 페이지 이동 요청시 JS 번들 파일을 받아와서 브라우저 차원에서 실행해서 페이지를 교체
• JS 번들은 페이지 이동 요청 전에 프리페칭 함
• useRouter는 "next/router"에서 import 해온다.

2-2. App Router

• 페이지 이동 요청시 JS 번들 파일과 함께 RSC Payloader도 전달
• useRouter는 "next/navigation"에서 import 해온다.