Next.js 13.4 버전 이후에서는 기존 Page 라우팅 방식이 아닌 App 라우팅 방식이 추가 됐다.

App 라우팅 방식을 사용하려면 useRouter를 사용하는 방식에서 마이그레이션이 필요하다.

기존 사용법 (Page Router)

기존 라우트 이벤트 처리시 next/router 모듈에서 useRouter 를 가져와 사용했다.

페이지 이동, URI에 저장된 파라미터 값, 라우터의 로딩 처리등 한 모듈 안에서 처리 했었다.

App Router 방식에서는 좀 더 세분화 되어 여러개의 모듈로 나누어 처리 되었다.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const { id } = router.query;
  
  useEffect(() => {
	  console.log(router.isReady);
  });

  const handleNavigation = () => {
    router.push('/redirect-page');
  };

  return (
    <div>
      <h1>Page ID: {id}</h1>
      <button onClick={handleNavigation}>Go to Another Page</button>
    </div>
  );
};

App Router 방식

useSearchParams, useParams, usePathname 등의 훅이 추가 됐다.

App Router 방식에서 라우팅 모듈을 사용시 명시적으로 해당 컴포넌트는 클라이언트 컴포넌트를 가르키는 ‘use client’ 를 최상위에 선언 해줘야 한다.

useRouter

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

useSearchParams

useSearchParams 훅은 URL의 쿼리 스트링 값을 가져올 수 있다.