Next.js의 네비게이팅

페이지 이동

Link

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

 

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>
  )
}

 

Pages Router와 App Router에서의 차이점

Pages Router

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

 

App Router

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