Next.js를 사용하여 클라이언트 측에서 화면 전환을 수행하는 경우 Link 구성 요소를 사용합니다. Link 컴퍼넌트는 디폴트로 props로서 passHref 속성을 받을 수 있습니다만, 이것은 도대체 어떤 장면에서 사용하는 것일까? 라고 생각해 조사해 보았습니다.

사용 기술

React

Next.js

styled-components

결론

Link 컴퍼넌트의 아이가 a 태그를 랩 하는 커스텀 컴퍼넌트의 경우 Link 컴퍼넌트에 「passHref」를 부여한다

Next.js | 한국어 문서 에 쓰여졌습니다.
공식 문서 역시 신!

애초에 passHref란 무엇인가?

Link 컴퍼넌트가 디폴트로 받을 수 있는 props 중의 하나

passHref는 아이에게 href 속성을 강제 전송합니다.

디폴트치는 「false」

passHref를 부여하지 않는 경우

"passHref"를 부여하지 않으면 a 태그에 href 속성이 부여되지 않습니다. a 태그에 href 속성이 부여되지 않으면 검색 엔진에 링크로 간주되지 않으므로 SEO에 악영향을 미칠 가능성이 있다. 그러므로 쓰는 법에 좋지 않다.

샘플 코드

import Link from 'next/link';
import styled from 'styled-components';

// これは、<a>タグをラップするカスタムコンポーネントを作成します
const RedLink = styled.a`
  color: red;
`;

const NavLink = () => {
  return (
    <Link href="/posts">
      <RedLink>投稿リストページへ遷移します</RedLink>
    </Link>
  );
};

export default NavLink;

실제 화면

passHref를 부여하면 어떻게됩니까?

Link의 자식인 a 태그를 래핑한 커스텀 컴퍼넌트에 href 속성이 부여되게 됩니다.

샘플 코드

<Link href="/posts" passHref>
  <RedLink>投稿リストページへ遷移します</RedLink>
</Link>

실제 화면

Next.js의 공식 문서에 기재되어 있는 내용이며, 이유도 분명하기 때문에, CSS in JS 라이브러리로서 styled-components를 사용하고 있는 경우는, 반드시 passHref 속성을 부여하도록 하는 것이 좋을 것 같다

참고문헌

Next.js | 한국어 문서
Next.js | 공식 문서