next/linkのaタグをラップした際の挙動を改めて確認する 🔍

リンクを作成する際に使うnext/link。
改めて仕様を確認してみました。

nextjs.org

❶ テキストのみを渡す

ソースコード

<Link href="https://kimizuka.fm">text</Link>

👇

レンダリング結果

<a href="https://kimizuka.fm">text</a>

Linkがaタグに置き換わります。

❷ hrefなしのaタグをラップ

ソースコード

<Link href="https://kimizuka.fm">
  <a>text</a>
</Link>

👇

レンダリング結果

<a href="https://kimizuka.fm">text</a>

❶のテキストのみを渡した場合と同じレンダリング結果になります。

❸ spanタグをラップ

ソースコード

<Link href="https://kimizuka.fm">
  <span>text</span>
</Link>

👇

レンダリング結果

<span>text</span>

aタグは生成されません。
JavaScriptのイベントによってクリックすれば、きちんとLinkのhrefに遷移するのですが、SEO的に不利になる可能性があるのでaタグでラップして使ったほうが良いようです。
個人的には、JavaScriptでの遷移だと、「command + クリック」で別タブで開けなくなるが嫌なので使用を避けています。

❹ aタグとspanタグをラップ

ソースコード

<Link href="https://kimizuka.fm">
  <a>
    <span>text</span>
  </a>
</Link>

👇

レンダリング結果

<a href="https://kimizuka.fm">
  <span>text</span>
</a>

aタグにLinkのhrefが設定されます。

❺ next/linkと異なるhrefをを持ったaタグをラップ

ソースコード

<Link href="https://kimizuka.fm">
  <a href="https://kimizuka.org">text</a>
</Link>

レンダリング結果

<a href="https://kimizuka.org">text</a>

aタグのhrefが優先されるようです。

❻ next/linkと異なるhrefをを持ったaタグをラップしつつ、passHref属性を付与

ソースコード

<Link href="https://kimizuka.fm" passHref>
  <a href="https://kimizuka.org">text</a>
</Link>

レンダリング結果

<a href="https://kimizuka.fm">text</a>

Linkのhrefがaタグに付与されます。