[NextJS] params 가져오는 법 - 동적 라우팅 하기

 

 

 

 

하고 싶었던 것

사용자가 /test/123b123b123 이라는 URL로 들어왔다.

그럼 :id인 123b123b123을 뚝 떼어내서 그걸 Backend 파라미터로 보내주고 싶었다.

 

기존 React의 경우 useParams()을 이용해서 가져왔다.

NextJS의 경우 useRouter() 해서 router.query를 하면 된다고 한다.

될까?

안된다 ❗️

 

정확히는 문제가 있다.

NextJS는 React와 달리 폴더 구조의 라우팅을 한다.

즉 app/test라는 폴더 안에 page.tsx가 있다는 말인데 여기에서 파라미터인 :id로 사용자가 URL을 치고 들어오면 NextJS에서는 경로를 찾지 못한다.

 

 

 

동적 라우팅

그렇다면 어떻게 해야할까?

간단하다.

 

동적 라우팅을 해주면 된다.

말이 거창한데 그저 기존 app/test라는 폴더 아래에 [id]라는 폴더 하나를 더 만드면 되는것이다.

 

 

위 캡쳐를 보면 원래 app/likwe/page.tsx에서 useRouter()을 사용했다가 오류가 났다.

동적 라우팅을 위해 app/likwe/[id]/page.tsx에 useRouter()을 사용해서 :id인 123b123b123를 추출할 수 있을 것이다.

Next13 이하라면...!

 

바로 오류가 나서 보니깐 Next13 이상부터는 더이상 useRouter을 사용하지 않는다고 한다.

넹?

(진심 Next는 13 이전과 이후로 나뉘는듯;;)

 

그렇다면 어떻게 :id를 가져올 수 있을끼?

usePathname을 사용하면 된다.

 

import { usePathname } from "next/navigation";

const id = usePathname();

이럴 경우 ptah 전체를 가져와서 파라미터만 쓰고 싶은 나의 경우 split라도 해야하는 판이었다.

그러다가 아래 글을 보게 되었다.

https://velog.io/@fervor_dev/Next.js-usePathname-useSearchParams

velog

 

이 글을 통해 props로 가져올 수 있다는 걸 알게 되었다 👍

 

const Example = ({ params }: { params: { id: string }}) => { 
    return (
        <div className="px-12 pt-32">
            <div>{params.id}</div>
        </div>
    )
}
export default Example;

이렇게 해주니

 

화면에 잘 나왔다!

나의 경우 화면이 아니라 백엔드에 넣어줘야 하기 때문에 

 

    const getLikweGroupData = async () => {
        const res = await axios.get(`http://localhost:4000/likwe/${params.id}`);
        setLikweGroupData(res.data.info);
    }

이렇게 해줬고 그 결과 잘나왔다 👍

 

 

 

 

 

 

 

fin.