Dynamic Routing + Router Hook (URL masking)

이슈 내용: Next.js 환경에서 URL 및 컴포넌트 디렉토리를 설정, 라우터 설정 필요

해결 방법: 각 디렉토리 폴더 생성 및 컴포넌트 이름 설정 -> 메인 URL에서 직접 접속 가능 + router 설정으로 query 전달 & 마스킹 처리

---

기본적인 URL 라우팅

localhost:3000 이 기본 접속 URL이라고 가정할 때,

Next.js 환경에서 제공하는 기본적인 Dynamic Routing을 설정하면,

디렉토리 및 컴포넌트 파일 이름을 작성하여 그대로 라우팅 된 URL로 접속이 가능하다.

 

예를 들어,

위와 같은 디렉토리 & 컴포넌트 이름을 설정한 다음,
로컬 구동 후 확인해 보면

/movies 에서는 index 의 내용이,

/movies/all 에서는 all 의 내용이 그대로 출력되는 것을 확인할 수 있다.

 

즉, 기본적인 URL 및 컴포넌트는 디렉토리 및 파일 설정을 통해 간단히 라우팅 할 수 있다는 것!

 

파라미터를 포함한 URL 라우팅

URL 뒤에 파라미터가 포함되어야 할 경우, 컴포넌트에 대괄호를 붙여준다.

[id].tsx

import {useRouter} from "next/router";

export default function MovieDetail() {
    const router = useRouter()
    console.log(router)
    return "detail"
}

접속 테스트로 movies/1 을 입력하였을 때, 아래와 같이 정상적으로 컴포넌트가 연동되었음을 확인할 수 있다.

더불어, 위의 코드에서 설정한 바와 같이 콘솔로 표시한 라우터를 확인해 보면

query - id : 1 이 설정되어 있는 모습

오브젝트에 id: '1'이 설정된 쿼리가 들어있음을 확인할 수 있다.

 

굉장히 편하고, 직관적이라 Next.js 가 인기가 많은 이유를 알 것 같은 라우팅 방식이다.

 

다양한 파라미터 보내기 & 라우터 상의 지저분한(?) URI 마스킹

const router = useRouter()
    const onClick = (id: number, title: string) => {
        router.push({
                pathname: `/movies/${id}`,
                query: {
                    id: id,
                    title: title,
                }
            },
        )
    }

위와 같이 라우터를 불러온 후, onClick 함수에 id, title 파라미터를 넣어서

라우터에 쿼리를 push + pathname 을 연결하게 설정하면,

링크를 클릭할 경우 해당 movies/id 루트로 넘어가게 된다.

{results?.map((movie: IMovieProps) => (
                <div className="movie" key={movie.id}
                     onClick={() => onClick(movie.id, movie.original_title)}>
                    <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}/>
                    <Link href={{
                        pathname: `/movies/${movie.id}`,
                        query: {
                            title: movie.original_title,
                        }
                    }}
                          as={`/movies/${movie.id}`}>
                        <h4>{movie.original_title}</h4>
                    </Link>
                </div>
            ))}

(movie object 와 관련하여, onClick 에 어떤 파라미터가 들어가는지 기재하기 위해 코드를 불러왔다)

 

그런데, 위와 같은 쿼리를 넣고 인덱스에서 영화를 클릭하여 들어오면,

아래와 같이 URL이 방대해진 것을 볼 수 있다. ㅠㅠ

다행히도 해당 이슈는 위에서 지정한 라우터 로직에서 바로 해결 가능한데,

라우터의 url 지정 단 바로 아래에서, as 부분에 정의한 부분대로 URL을 마스킹 할 수 있다.

(rewrites() 의 source 부분을 정의한 것과 같은 맥락이다)

 

결론적으로, 위의 URL을 타겟으로 인덱스에서부터 다시 접속을 해보면...

URL 파라미터는 가린 채로 깔끔하게 id 만 출력 + 쿼리에는 지정한 데이터가 그대로 가져와지는 것을 확인할 수 있다.