Next.js 13.4 버전 이후에서는 기존 Page
라우팅 방식이 아닌 App
라우팅 방식이 추가 됐다.
App
라우팅 방식을 사용하려면 useRouter
를 사용하는 방식에서 마이그레이션이 필요하다.
기존 라우트 이벤트 처리시 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>
);
};
useSearchParams
, useParams
, usePathname
등의 훅이 추가 됐다.
App Router 방식에서 라우팅 모듈을 사용시 명시적으로 해당 컴포넌트는 클라이언트 컴포넌트를 가르키는 ‘use client’
를 최상위에 선언 해줘야 한다.
next/router
→ next/navigation
경로 변경'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
훅은 URL의 쿼리 스트링 값을 가져올 수 있다.