Zenn
🦔

Next.jsのLinkコンポーネントにpassHref属性を付与するのはどんな時なのか調べてみた

2021/04/12に公開
Next.js
Next.js
React
styled-components
link
tech

概要

Next.jsを用いてクライアントサイドで画面遷移を行う場合、Linkコンポーネントを使用します。LinkコンポーネントはデフォルトでpropsとしてpassHref属性を受け取ることができるのですが、これはいったいどんな場面で使用するんだろう？と思ったので、調べてみました。

使用技術

  • React
  • Next.js
  • styled-components or emotion

はじめに、結論

Linkコンポーネントの子供がaタグをラップするカスタムコンポーネントの場合に
Linkコンポーネントに passHref を付与すればいい

aタグをラップするカスタムコンポーネントとは、
以下のようなコンポーネントのことを指します

const RedLink = styled.a`
  color: red;
`;

実際に、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.png

passHrefを付与した場合

レンダリングされたaタグにhref属性が付与されるようになります

サンプルコード

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

実際の画面

linkpassHref.png

最後にもう一度、結論

Next.jsの公式ドキュメントにも記載されている内容ですし、理由も上記で説明したように明確に根拠が存在するので、CSS in JS ライブラリ として styled-components or emotion を使用しているプロジェクトでは、必ずpassHref属性を付与するようにした方が良さそうです。

参考文献

Next.js | 日本語ドキュメント
Next.js | 公式ドキュメント

Discussion