Next 페이지에서 사용되는 <Link>의 props 옵션 정리 (href, passHref, as 등등)

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2022년 1월

배경

• Link 컴포넌트를 사용하는 과정에서 props 옵션들을 정리할 필요성을 느껴서 정리해 봄.

next/link의 props 옵션 정리 및 주의점

• passHref: 자식에게 href 를 전달하도록 해주는 옵션
• as: url 바에 보여지는 실제 path
• prefetch: Link 컴포넌트는 preload 된다.
• 주의점
  • Link 의 자식 컴포넌트가 a tag로 감싸져 있으면, passHref 속성이 추가되어야 함.
    • styled-components 를 사용한다면 더욱 필요함.
    • a tag가 href 속성을 갖고있지 않기 때문에 사이트 접근성이나 SEO에 안 좋을 수 있어서 꼭 href 속성을 넘겨줘야 함.