Next.js에서 useRouter와 Link태그를 사용할 때 URL 마스킹하기

URL 마스킹이란?

URL 마스킹은 사용자에게 보여지는 URL을 실제 페이지 구조와는 다르게 표시하고자 할 때 사용되는 기술이다.

(router.push 또는 router.replace 메소드를 사용할 때 쓸 수 있는 'as 파라미터'가 URL 마스킹에 사용된다.)

• url 파라미터: 실제로 라우팅되는 페이지의 경로
• as 파라미터: 브라우저의 주소 표시줄에 표시되는 경로

 

왜 쓰는데?

• 사용자 경험 향상: 사용자에게 더 읽기 쉽고 이해하기 쉬운 URL을 제공함으로써 사이트의 전반적인 사용자 경험을 개선할 수 있다.
• 보안 강화: 사용자가 URL을 통해 어떤 정보를 추측하는 것을 방지할 수 있다.

 

UseRouter를 쓸 때 URL 마스킹하기 (예시)

예를 들어, 사용자가 /products/1 페이지에 있고, 이 상품의 이름이 "Blue Shirt"라고 가정해보자.

그러나 사용자에게 URL을 더 친숙한 형태로 보여주고 싶다면, as 파라미터를 사용하여 다음과 같이 작성할 수 있다.

// 패러미터로 쓰일 변수라 치자
const { id, productName } = item

// useRouter의 2번째 인자를 as로 쓸 수 있다. (URL 마스킹)
router.push('/products/[id]', `/products/${productName}`, { shallow: true });

 

 

Link를 쓸 때 URL 마스킹하기 (예시)

Link태그에도 as를 넣어 대체 url을 만들 수 있다. 너무 쉽다.

<li>
  <Link href="/" as="/sweet-home">
    All Meetups
  </Link>
</li>

 

 

그렇다면 URL마스킹을 브라우저 주소창에 입력하면 실제 해당 페이지로 가나?

'아니요. 그렇지 않습니다.' 라고 말할 수 있다. 기본적으로 안 된다. 그런게 가능하려면 추가적인 리다이렉팅 로직을 설정해줘야한다. Link컴포넌트나 useRouter은 URL을 꾸며주는 것까지만 하고 그 이상의 처리는 해주지 않는다고 생각하면 된다.

 

구글의 robot이 알아차리려면 서버사이드에서도 as로 설정된 주소로 인식할 수 있어야 한다. 그러나 useRouter는 기본적으로 csr 훅이므로.. 서버사이드에서도 as로 마스킹된 url을 인식하려면 추가적인 설정이 필요하다고 한다.

이 부분은 추후에 학습해서 올려보겠다!