Next.js router.push 사용

Next.js로 프로젝트를 하던 중 일반적인 Link말고 router.push를 사용할 일이 생겨 사용해 보았고, 이 경험을 공유하면 좋을 거 같다고 생각이 들어서 포스팅을 하게 되었다.

useRouter() 사용하기

우선 router.push를 사용하려면 useRouter를 import해서 사용해야 한다.

import { useRouter } from 'next/router'

const Home = () => {
  const router = useRouter();
  return (
  	<button>페이지 이동</button>  
  )
}

export default Home;

위 코드 처럼 useRouter를 import 한 뒤 router라는 변수에 지정해준다.

onClick시 router.push를 통해 페이지 이동

import { useRouter } from 'next/router'

const Home = () => {
  const router = useRouter();
  return (
  	<button onClick={() => {
      	router.push("about");
      }>페이지 이동</button>  
  )
}

export default Home;

이런 식으로 router.push("페이지 이름")으로 이동해 주시면 된다.

파리미터와 함께 이동

import { useRouter } from 'next/router'

const Home = () => {
  const router = useRouter();
  return (
  	<button onClick={() => {
      	router.push({pathname: "about", query: {keyword: searchText}});
      }>페이지 이동</button>  
  )
}

export default Home;

파라미터를 같이 넘겨주려면 위 코드처럼 pathname에 이동할 페이지를, query에 파라미터 이름과 넘겨줄 값을 넣어주면 된다.

오늘은 이렇게 Next.js의 useRouter에서 push를 알아보았는데, 일반적인 Link상황 말고 이벤트 발생시 이동이나, 값을 검사 후 이동해야 하는 경우 등에서 router.push가 사용될 수 있을 거 같다.
읽어주셔서 감사합니다.