Next.jsで外部リンクにはaタグを使うべき理由

公開日:

2026-01-22

Next.jsで外部リンクを書くとき、<Link> コンポーネントと <a> タグのどちらを使うべきでしょうか。

結論から言うと、外部リンクには通常の <a> タグを使ったほうが良いです。この記事では、その理由と実装方法を解説します。

Next.jsの Link コンポーネントとは

Next.jsの <Link> コンポーネントは、アプリケーション内のページ間を移動するためのコンポーネントです。

通常のページ遷移とは異なり、ページ全体をリロードせずに移動できるため、高速でスムーズなユーザー体験を提供します。

<Link> の主な特徴は以下の2つです。

これらの機能は、同じNext.jsアプリケーション内のページ間移動において威力を発揮します。

外部URLに <Link> を使うと、以下の問題が発生します。

<Link> はデフォルトでリンク先を事前に取得しようとします。しかし、外部URLへのプリフェッチは同一オリジンポリシーにより制限されます^[1]。結果として、不要なネットワークリクエストが発生し、オーバーヘッドになります。

<Link> のクライアントサイドナビゲーションは、同一オリジン内のルート間でのみ機能します^[2]。外部URLに移動する場合、結局ブラウザの通常のナビゲーションが発生するため、 <Link> を使うメリットがありません。

外部リンクには rel="noopener noreferrer" を付けることが推奨されています^[3]。<a> タグであれば、これらの属性を自然に追加できます。

以下に、Before/Afterの実装例を示します。

import Link from 'next/link'

// 外部リンクにLinkを使っている（非推奨）
<Link href="https://twitter.com/example">
  Twitterをフォロー
</Link>

// 外部リンクにはaタグを使う（推奨）
<a
  href="https://twitter.com/example"
  target="_blank"
  rel="noopener noreferrer"
>
  Twitterをフォロー
</a>

target="_blank" と rel="noopener noreferrer" を付けることで、リンクを新しいタブで開き、セキュリティも確保できます。

リンクの種類によって、どちらを使うかを判断します。

リンクの種類	使うべきもの	例
内部リンク	`<Link>`	`/about`, `/posts/hello`
外部リンク	`<a>`	`https://example.com`

判断の基準は「同じNext.jsアプリケーション内のページかどうか」です。同一アプリ内であれば <Link> を使い、外部サイトへのリンクは <a> を使います。

脚注