인프런 커뮤니티 질문&답변

___님의 프로필 이미지

작성한 질문수

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

Next.js Part 1 - 기본기 다지기

Link태그와 useRouter

해결된 질문

24.07.29 16:21 작성

·

98

0

혹시 Next.js에서 Link태그와 useRouter를 제공하고 있는데 서로 차이점이 있을까요??

이미지나 버튼이 있으면 거기에 onClick 달고 라우터 쓰고 있긴한데
이미지나 버튼에 링크를 감싸버리면 뭔가 이상할 것 같아서 어떤식으로 쓰면 좋을까요

<Link href="/" ><Image ... /></Link>
<Image ... onClick={()=>router.push("/")} />

답변 1

1

로펀님의 프로필 이미지
로펀
지식공유자

2024. 07. 29. 16:33

안녕하세요 🙂 질문주신 내용에 답변을 드립니다.

Link 태그로 Image 태그나 Button 태그를 감싸셔도 괜찮습니다.

  • Link 태그 사용 -> a 태그를 생성, Client Side Routing 가능, SEO에 도움이 됨 (a 태그가 생기기 때문에 검색 엔진에서 인식 가능)

  • Router 사용 -> Client Side Routing 가능, a 태그 생성 X, SEO에 좋지 않음 (a 태그가 생기지 않는다)

화면상에 보이는 버튼들은 대부분 Link태그로 대체가 가능하실 거에요! 다만 routing을 다양한 URL로 해야하는 경우 등 다이나믹하게 라우팅을 처리해야 할 때만 useRouter를 사용하시는 것을 권장드립니다

___님의 프로필 이미지
___
질문자

2024. 07. 29. 19:52

감사합니다. 저도 처음에 Link만 사용하려다가 순간 궁금증이 있어 질문 드렸습니다.

___님의 프로필 이미지

작성한 질문수

질문하기