개발자

Next.js에서 navigation시 as 사용 용도?

2023년 05월 09일조회 270

Next.js에서 router.push에 as 라는 옵션이 있는데, 이걸 Link 컴포넌트에서도 쓸 수 있나요? 사용을 한다고하면 그 용도가 어떻게 되나요? 언제 활용하면 좋은지 감이 잘 안잡혀서 질문 올려요.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

손정현님의 프로필 사진

안녕하세요! next.js에서 router와 Link에 `as` 옵션은 보여지는 url을 as의 값으로 보여주지만 실제로 페이지 이동이 될때는 Link라면 설정된 href로, router.push라면 질문자님이 명시한 url로 가게됩니다. 사용 사례는 여러가지가 있는거 같은데 생각나는 것만 나열하자면: - 이동한 페이지에서 브라우저 주소창에 url parameter 값을 노출하고 싶지 않을때 ex) /qnas?a=xxx&b=xxxx를 /qnas로 깔끔하게 정리할 수 있음 - 이동하기 전 페이지에서 a 태그의 href를 정리하고 싶을때 (SEO 용도로) ex) 기술적으로는 page A에 노출된 page B의 링크가 /qnas?a=xxx 여야하는데, SEO 적으로는 /qnas가 더 도움이 되기 때문에 page A에서 후자로 보이게끔 설정할 수 있음 한가지 유의할점은 이동된 페이지에서 새로고침을 하게되면 명시했던 url이 날라가고 as 값만 브라우저의 url 주소창에 남게됩니다. 공식 문서 참고해보시면 도움 될 것 같아요 :) - https://nextjs.org/docs/pages/api-reference/functions/use-router#routerpush - https://nextjs.org/docs/pages/api-reference/components/link#with-nextjs-13-middleware

박재형님의 프로필 사진

박재형

제로베이스 프론트엔드스쿨 프론트엔드2023년 06월 01일

nextjs13에서 해당 기능이 사라졌는데 혹시 대체할수 있는 방법 아시나요 ㅜㅜ

엄홍재님의 프로필 사진

엄홍재

커리어리 소프트웨어 엔지니어2023년 06월 01일

nextjs 13을 직접 써보지는 않았지만 as는 그대로 사용할 수 있지 않나요?(공식문서에 남아있는듯보입니다?) Link tag 안에 a tag를 사용하는것 때문에 문제가 되는것은 아닐까요?

커리어리 AI 봇님의 프로필 사진

네, Next.js의 'Link' 컴포넌트에서도 'as' 옵션을 사용할 수 있습니다. 이를 통해 페이지 경로와 다른 URL을 표시할 수 있습니다. 일반적으로 'as' 옵션은 다음과 같은 경우에 사용됩니다: 1. 동적 경로에서 SEO를 위한 URL 변경: Next.js에서 동적 경로를 사용할 때, 동적 요소를 포함한 URL은 SEO에 좋지 않을 수 있습니다. 'as' 옵션을 사용하면 실제 페이지 URL은 유지한 채, 브라우저의 주소 표시줄이나 검색 엔진에 표시되는 URL을 변경할 수 있습니다. 위의 예시에서 실제 페이지 경로는 '/posts/[id]'이지만, 'as' 옵션을 사용하여 브라우저에 표시되는 URL은 '/posts/1'로 변경됩니다. 이는 사용자가 해당 URL을 볼 때 더 의미 있는 URL로 보여주고 SEO에 더 유리하게 작용할 수 있습니다. 2. 외부 링크로의 리다이렉트: 'Link' 컴포넌트를 사용하여 외부 사이트로의 링크를 생성할 때도 'as' 옵션을 활용할 수 있습니다. 위의 예시에서 'as' 옵션을 사용하여 브라우저의 주소 표시줄에는 '/external-link'이 표시되지만, 실제로는 'https://example.com'으로 리다이렉트됩니다. 'as' 옵션은 특정 상황에서 유용하게 활용될 수 있으며, 주로 SEO 관련 이슈나 외부 링크로의 리다이렉트 등에서 활용됩니다.

1
2
3
4
5
6
7
8
9
10
#1
<Link href="/posts/[id]" as="/posts/1">
  <a>Post 1</a>
</Link>


#2
<Link href="https://example.com" as="/external-link" passHref>
  <a>Go to External Site</a>
</Link>

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!