【Next.js】リンクの設置方法

## はじめに
　本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## リンクの設置方法
### pagesフォルダ内の状態
pagesフォルダ内は以下のような状態になっています。
![スクリーンショット 2022-04-14 0.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b8ec76f6-f08d-19a6-210a-0d3ed95465ac.png)

ルートのページに`/pages/samplePost`へのリンクを設置します。
設置する方法は以下の２つがあります。

## `a`タグを使用する
以下のように`a`タグを使用することでリンクを設置できます。

```index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Sample App!!</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="/posts/samplePost">Sample App!!</a>
        </h1>
      </main>
    </div>
  )
}
```

### `Link`を使用する
Next.jsで用意されている`Link`コンポーネントを使用することでもリンクを設置できます。
基本的にはこちらを使用します。

```index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Link from 'next/link' // 追記

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Sample App!!</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          // 以下を変更
          Welcome to<Link href="/posts/samplePost">Sample App!!</Link>
        </h1>
      </main>
    </div>
  )
}
```

### ２つの違い
上記２つの方法がありますが、ページ遷移の際にリロードするかしないかの違いがあります。
それぞれの動作を確認します。

#### `a`タグの場合
まず、`a`タグを使用した場合のページ遷移を確認します。
違いがわかりやすいように、デベロッパーツールで背景を`purple`に設定します。
この状態で`Sample App!!`をクリックします。

![スクリーンショット 2022-04-14 1.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/93f778df-d30e-aafb-a6bd-3e1c47f12d8c.png)

すると、画面がリロードされて背景が白になりました。

![スクリーンショット 2022-04-14 1.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/11d26fc4-0e0a-38af-2c4d-bb56c8fa624e.png)


#### `Link`の場合
次に、`Link`コンポーネントを使用した場合のページ遷移を確認します。
同様に背景を`purple`に設定した状態で`Sample App!!`をクリックします。

![スクリーンショット 2022-04-14 1.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/93f778df-d30e-aafb-a6bd-3e1c47f12d8c.png)

すると、画面はリロードされず背景が`purple`のままです。

![スクリーンショット 2022-04-14 2.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/fbb72dd9-6bb5-f619-6295-897691edc7fa.png)

以上のように、`a`タグの場合はページ遷移の際に画面がリロードされ、`Link`の場合にはリロードされません。


### SEO対策
SEOを意識する場合には、以下のように`Link`の中に`a`タグを記述するのが良いようです。

```index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Link from 'next/link' // 追記

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Sample App!!</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to
          <Link href="/posts/samplePost">
            <a>Sample App!!</a>
          </Link>
        </h1>
      </main>
    </div>
  )
}
```