[NextJS] 링크 정보 숨겨서 query값만 받아오기

Router as, Link as란?

실제 URL 정보를 사용자가 보지 못하도록 숨겨주는 기능

 

Router as

import Router from 'next/router'

const click = () => {
  Router.push('실제로 이동할 주소', '사용자에게 보여줄 주소')
}

 

Link as

<Link href="실제 이동할 주소" as="사용자에게 보여줄 주소">
  <span>이동</span>
</Link>

---

사용 예시

현재 작업 중인건 `Link as`로 진행 중인거라

해당 내용을 알게 되고 쉽게 해결이 가능하구나! 하고 접근했다. 바로 도전!

<Link href={`/projects/${id}`} as={`projects/${title}`}>

 

문제

이렇게 접근하면 당연히 되는거구나 했는데 전혀 그렇지 않다.

id값을 받아서 ssr에서 사용할려고하는데 as에 담았던 title이 담겨져 오는 것이었다.

기능이 제대로 구현 안되네! 라고 생각했는데 이유는 간단했다.

바로 `params`로 id를 가져왔었는데 당연히 현재 url은 title로만 되있기 때문에!!

 

해결

<Link href={`/projects/${title}?id=${id}`} as={`projects/${title}`}>

 

해결은 간단하게 됐다.

원하는 id값을 href에 query 값으로 담아가는 것!

export const getServerSideProps: GetServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const { id: pageId } = ctx.query;

 

가져온 값에서 `query` 값인 id를 추출해서 사용

`params`값이 필요하다면 따로 뽑아쓸 수도 있다.

---

마무리

이 부분을 해결하기 위해서 검색을 좀 했는데 생각보다 mapping이나 nextconfig를 만지고 복잡하고

router as로 해야 뭔가 더 용이한 것처럼 나와서 바꿔야하나 고민했었는데

좀 더 쉬운 해결법을 찾다가 오히려 더 짧은 코드로만 해결되어서 기분이가 좋당

다른 프로젝트에서도 유용하게 사용할 듯!