Next.js App Router에서 라우팅 처리하기

Next.js 13 이상부터 App Router를 사용하면서 내비게이션 동작 방식이 변경됐다. 이전 버전의 pages 디렉토리를 사용하던 Pages Router에서 app 디렉토리를 사용하는 App Router로 전환하려면 라우터 관련 코드를 수정해줘야 한다.

 

useRouter 훅 사용

App Router에서도 클라이언트 컴포넌트에 한해 useRouter 훅으로 router를 생성해 router.push() 메소드를 사용할 수 있다. 다만 기존 Pages Router의 "next/router"에서 import하던 라우터를 App Router에서 그대로 사용하게 되면 "NextRouter was not mounted." 오류가 발생한다. App Router 디렉토리에 생성된 컴포넌트의 경우 useRouter 훅을 "next/navigation"에서 import해서 사용해야 한다.

"use client";

import { useRouter } from "next/navigation";

export default function MyPage() {
  const router = useRouter();
  return <button onClick={() => router.push("/profile")}>To profile</button>;
}

 

redirect 사용

redirect 메소드는 서버 컴포넌트에서 useRouter의 역할을 하는 함수다. 기본적으로 서버 컴포넌트, 루트 핸들러, 또는 서버 액션을 통해 동작하기 때문에 클라이언트 컴포넌트에서 redirect 함수만 호출하면 동작하지 않는다.

 

클라이언트 컴포넌트에서 redirect를 쓰고 싶다면 서버 액션을 따로 생성한 뒤에 해당 액션을 호출해야 한다.

import { redirect } from "next/navigation";

export default function MyPage({ loggedIn }: { loggedIn: boolean }) {
  if (!loggedIn) return redirect("/login");
  return <div>로그인한 유저만 이 페이지를 볼 수 있습니다.</div>;
}

 

Link 컴포넌트 사용

Next.js가 제공하는 Link 컴포넌트로도 페이지 이동을 처리할 수 있다. 서버 컴포넌트와 클라이언트 컴포넌트 양쪽 모두 사용 가능하다.

import Link from "next/link";

export default function MyPage() {
  return <Link href="/profile">To profile</Link>;
}

 

 

참고:

• https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
• https://nextjs.org/docs/messages/next-router-not-mounted