Next.js 13 에서 ServerComponent에 useRouter를 import하면

NextRouter was not mounted. 에러가 발생한다.

이제 문자열 useRouter().pathname과 객체 useRouter().query는 마이그레이션 됐기 때문에
이제 더 이상 params 값을 호출하기 위해 useRouter 훅을 가져오는 것이 아니라 usePathname과 useSearchParams 훅을 가져다가 사용하면 된다.

import { usePathname } from 'next/navigation'
 
export default function SearchBar() {
  const pathname = usePathname();
 
  // URL -> `/chat?search=my-message`
  // `Search: /chat`
  return <>Search: {pathname}</>
}

useSearchParams

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const getItem = searchParams.get('search')
  const hasItem = searchParams.has('search')
 
  // URL -> `/dashboard?search=my-project`
  // get -> `Search: my-project`
  // has -> `true`
  return <>Search: {search}</>0
}

get 메서드로 query의 value 값을 가져올 수 있고
has 메서드로 query 키의 존재 여부를 확인할 수 있다.

params 값만 가져오기

그렇다면 usePathname 훅으로 기존의 params 값을 가져와야 하는가?

만약 /movie/genre/5라고 가정한다면 split("/")로 잘라서 사용하는 것은 굉장히 비효율적이다.

Stack Overflow의 한 질답에서 답을 찾을 수 있었다.

export default function Page({ params }: { params: { id: number } }) {
  
  // URL -> `/movie/genre/5`
  // `ID: 5`
  return <>ID: {params.id}</>;
}

// app/movie/genre/[id]/page.tsx

page.tsx에서 params라는 props를 가져올 수 있었다!
즉, 전체 url이 필요하거나 쿼리 스트링이 필요하지 않다면 Hook을 가져올 필요 없이 params를 props에서 가져오도록 하면 된다.

레퍼런스

usepathname / usesearchparams
Next.js - useRouter
Next.js - usePathname