24.08.23 NextJS 동적라우팅

Next JS에서 라우팅을하려면, 원하는 주소로 폴더를 만들고, 해당 주소에서 보여줄 페이지 컴포넌트를 page.jsx(tsx)로 만들었다.

그렇다면, 동적라우팅을 원하는 경우는 어떨까?

동적라우팅은 폴더이름을 대괄호로 감싸주면 된다.

 

<Routes>
    <Route path="/" element={<Landing />} />
    <Route path="/dex" element={<Dex />} />
    <Route path="/pokedetail" element={<PokeDetail />} />
    <Route path="/something/:id" element={<Something />} />
</Routes>

()=>{navigate(`/something/${id}`)}

우리가 react-router-dom을 사용할 때에는 저렇게 원하는 params를 path에 지정해주어서 이동했다.

 

하지만 NextJS프레임워크에서 동적라우팅을 원하는 경우에는 일반 라우팅도 폴더명으로 지정했던 대로 대괄호에 감싸 주소를 지정하면 된다.

이렇게 폴더를 만들어주면 주소는 https://localhost:5500/movies/1341222 이렇게 지정되는 것이다.

그럼 저 params값을 어떻게 가져와서 사용할까?

page파일에서 props를 받아 해당 props를 콘솔에 찍으면 저런 형태가 나온다.

하지만 해당 컴포넌트는 서버컴포넌트이기때문에 백엔드에서는 다른 형태를 찍어준다.

이렇게 파라미터와 서치파라미터를 찍어주는데 만약 queryString형태로 작성한다면 searchParams에 들어간다.

이렇게 queryString과 params를 백엔드 측에서 사용할 수 있다.

export default function MovieDetail({
    params: { id },
    searchParams: { name, title },
}: {
    params: { id: String };
    searchParams: { name: String; title: String };
}) {
    console.log("id= ", id);
    console.log("name= ", name);
    console.log("title= ", title);
    return <h1>Movie</h1>;
}

이렇게 구조분해 할당식으로 데이터를 가져올 수도 있다.