Gatsby.jsにおける内部リンクの設定方法

Gatsby.js では、内部リンクを設定する方法が提供されており、これによりユーザーがサイト内を簡単に移動することが可能になります。この記事では、その設定方法を初心者の方でも理解できるように詳しく説明します。

Gatsby Link コンポーネントの利用

Gatsby.js では、ページ間をリンクするための<Link>コンポーネントが提供されています。このコンポーネントは、Gatsby のページ遷移を高速化する機能を備えており、スムーズなユーザーエクスペリエンスを提供します。

具体的な使用方法は以下の通りです。

import { Link } from "gatsby"

const SomeComponent = () => (
  <div>
    <Link to="/page-2/">Go to Page 2</Link>
  </div>
)

このコードでは、<Link>コンポーネントを使用して、現在のページから/page-2/というパスのページへのリンクを作成しています。

注意点

<Link>コンポーネントは、Gatsby の内部ページ（同じ Gatsby サイト内のページ）へのリンクにのみ使用してください。外部サイトへのリンクには、通常の<a>タグを使用します。

<a href="https://www.external-site.com">External Site</a>

また、Gatsby サイトのルート（ホームページ）へリンクする場合、パスとして"/"を指定します。

<Link to="/">Go to Home</Link>

これらの方法を使って、Gatsby.js で内部リンクを設定することができます。

マークダウンでのリンク設定

Gatsby.js では、マークダウンファイルからもページを生成することができます。マークダウンファイル内でリンクを設定する際は、以下のように記述します。

[Go to Page 2](/page-2/)

このコードでは、Go to Page 2というテキストに、/page-2/というパスへのリンクを設定しています。

注意点

マークダウンでリンクを設定する場合も、同じ Gatsby サイト内のページへのリンクを指定することが基本です。外部サイトへのリンクを設定する場合は、以下のように記述します。

[External Site](https://www.external-site.com)

また、ルート（ホームページ）へのリンクは以下のように設定します。

[Go to Home](/)

この方法を使って、マークダウンファイルからも Gatsby.js 内部リンクを設定することができます。

まとめ

Gatsby.js では、<Link>コンポーネントやマークダウンを使用して内部リンクを設定することができます。これらの方法を理解し、適切に使用することで、サイト内のページ間をスムーズに移動することが可能になります。

ただし、各方法が適用される状況（内部リンクか外部リンクかなど）を理解し、適切に使用してください。