Next.js14에서 useRouter 사용하기

 

nextjs12 를 쓰다가 nextjs14로 급 점프를 하다보니 새로운 것들이 꽤 눈에 들어왔다. 해당 내용은 nextjs13 이후에도 적용이 되는 내용이다. 페이지를 리로드하려고하는데, reload() 함수가 없어진것 아니겠는가! 

그래서 공식문서를 찾아들어갔다. 공식문서 원본을 좀 가져와봤다. 

 

useRouter()

• router.push(href: string, { scroll: boolean }):
  Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
  "use client" 를 사용한 client-side로 route를 제공할 때 사용
• router.replace(href: string, { scroll: boolean }): Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.
  역시나 client components 에서 라우트 쓸 때 사용 - 
• router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
  reload()를 쓰지 않고  페이지 리로드가 필요할 시에 사용할 수 있다. 서버 컴포넌트 리렌더링이 된다. 
• router.prefetch(href: string): Prefetch the provided route for faster client-side transitions.
  href에 대한 페이지 prefetch 하여 더욱 빠른 클라이언트 사이드 페이지 전환을 구현할 수 있다
• router.back(): Navigate back to the previous route in the browser’s history stack.
• router.forward(): Navigate forwards to the next page in the browser’s history stack.

 

 

Migrating from next/router

• The useRouter hook should be imported from next/navigation and not next/router when using the App Router
  import 할 때 'next/router' 가 아니라 'next/navigation' 을 사용해야한다.
• The pathname string has been removed and is replaced by usePathname()
  pathname 문자는 없어지고 usePathname으로 변경됨!
• The query object has been removed and is replaced by useSearchParams()
  query object 역시 없어지고 useSearchParams로 변경됨
• router.events has been replaced. 

 

위의 영문 원본을 보실 수 있는 공식문서 주소!

 

• 공식문서

https://nextjs.org/docs/app/api-reference/functions/use-router

Functions: useRouter | Next.js