Next.js 동적 라우팅(Link)

Next.js 에서 동적 라우팅을 통해, 전체 포스트 중 하나의 포스트를 클릭했을 때 해당 포스트의 정보들을 보여주는 페이지로 이동하는 페이지를 구현했다.

나는 Link 를 사용했다.

처음엔 몇개의 parameter 가 주소 뒤에 붙을 지 몰라 모든 parameter 에 대한 페이지 접속을 허가하기 위해 catch all routes 기능을 사용하려 했다.

하지만 참고하기위해 당근마켓에 들어갔을 때, 하나의 포스트 뒤에는 id 값에 해당하는 숫자만 있고 나머지는 아무것도 없었다.

나머지 정보들은 따로 들고오거나, 주소 뒤에는 보이지 않는 듯 했다.

그래서 [id].tsx 파일로 id 값만 가져오기로 했다.

페이지로 이동해야 했기에 Link 에서 하위 소스처럼 구현해줬다.

<Link
    href={{
    	pathname: `/post/[id]`,
        query: {
        	data: JSON.stringify(post) 
            // post: 넘어간 페이지에서 쓸 데이터들
            }
       }}
    as={`/post/${post.id}`}
>
...          
</Link>

Link url 에는 해당 포스트 id 값만 표시하기위해 위처럼 as 를 사용했다.

as 를 사용하면 url 마스킹을 쉽게 할 수 있다.

사실 다른 글에서나 영상에서는 pathname 없이 href{'/post/${post.id}'} 이런식으로 작성해도 잘 됐지만 나는 안됐다... 그래서 저렇게 했다.

그리고 이동한 페이지에서 id 값만 쓸 순 없으니, 해당 포스트에 대한 정보들을 쿼리로 넘겨줘야한다. 저렇게 쿼리를 넘겨주면 url 에는 나오지 않아 깔끔하다!

아 넘겨주기전 데이터가 Object 이므로 문자열로 치환해준뒤 보내줬다.

[id].tsx 파일에서는 type 에러와 undefined 에러가 나서 조건처리를 해줬다.

에러내용은 대충router.query.data 가 string 형식이거나 undefined 라서 파싱을 못한다는 내용이었는데 string 타입일 때만 파싱해서 state 값을 업데이트해줬다.

const router = useRouter();
...
useEffect(() => {
    if (typeof router.query.data === 'string') {
        setPostData(JSON.parse(router.query.data))
    }
}, [router.query.data])

그다음은 사용하면 된다!!