4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-11

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.png

passHrefを付与したらどうなるか

Linkの子であるaタグをラップしたカスタムコンポーネントにhref属性が付与されるようになります。

サンプルコード

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

実際の画面

linkpassHref.png

Next.jsの公式ドキュメントに記載されている内容ですし、理由も明白なため、CSS in JSライブラリとしてstyled-componentsを使用している場合は、必ずpassHref属性を付与するようにした方が良さそう

参考文献

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

4
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?