Frontend

Next.js 페이지의 params 및 searchParams

jbilee 2024. 4. 21. 21:34

Next.js 프로젝트에서는 다양한 방법으로 페이지의 route path와 쿼리 파라미터를 읽을 수 있는데, 그중 Pages Router에서 useRouter 훅 외적으로 쓸 수 있는 방법을 정리해봤다.

 

useParams 훅으로 dynamic route값 읽기

내 페이지가 dynamic route를 쓴다면 useParams() 훅으로 바로 그 값에 접근할 수 있다. useRouter() 훅의 라우터 객체를 통하지 않고 순수하게 query 객체만 읽을 수 있는 전용 훅이다.

// src/pages/[hello]/index.tsx

import { useParams } from "next/navigation";

export default function Page() {
  const params = useParams(); // params: { "hello": "URL_PATH" }
  return <div>...</div>;
}

 

useSearchParams 훅으로 쿼리 읽기

페이지 URL에 직접적으로 사용하는 쿼리문도 간편하게 접근 가능하다. useSearchParams() 훅으로 객체를 받은 뒤에 해당 객체에 .get() 메소드를 써 내가 원하는 쿼리 key에 해당하는 값을 가져오면 된다.

// path가 www.사이트.com?hello=world 일 경우

import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  const queryValue = searchParams.get("hello"); // queryValue: "world"
  return <div>...</div>;
}

 

 

참고: