개발자
Next.js에서 router.push에 as 라는 옵션이 있는데, 이걸 Link 컴포넌트에서도 쓸 수 있나요? 사용을 한다고하면 그 용도가 어떻게 되나요? 언제 활용하면 좋은지 감이 잘 안잡혀서 질문 올려요.
답변 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를 사용하는것 때문에 문제가 되는것은 아닐까요?
네, 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 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!