Next app router slug 추출하기 / url params 가져오기 / 다이나믹 파람스 dynamic params / Next 쿼리파람 가져오기 / 쿼리스트링 가져오기

다이나믹 파람스 가져오기

예를들어 user/visitor/[key]/page.tsx 라는 경로일 때,
key 값을 추출하려고 한다.

const page = ({ params }: { params: { key: string } }) => {

    console.log(params.key);
    ...

}

 

useParams훅을 사용해도 된다

import { useParams } from "next/navigation";

const page = () => {
    const params = useParams();
    console.log(params.key);
    ...
}

 

쿼리스트링 가져오기

url에서 쿼리스트링을 추출할 때.
user/visitor/test?address="강남구"

import { useSearchParams } from "next/navigation";

const page = () => {
    const searchParams = useSearchParams();
    console.log("searchParams", searchParams.get("address")); // "강남구"
}

 

훅 쓸때는 'use client'