NEXT.jsのチュートリアルをやってみた〜ページ遷移編〜

# はじめに
前回は、Next.jsの公式のチュートリアルの環境構築を行い、実行できるところまで行いました。
今回は、Next.jsのページ遷移のチュートリアルを進めたいと思います。


https://qiita.com/YSasago/items/59c65a5d9b1fb50ae911


# まとめ
* Next.jsでは、ルーティング設定を設定する必要がない
* Next.jsでは、ページ遷移にLinkコンポーネントを使うことでClient-Side Navigationを実現
    * URLを切り替えてもページ再読み込みが発生しないので高速
    * クライアントの状態を保って、ページ遷移させることができる

# どのチュートリアル？
Next.jsの公式チュートリアルの[Navigate Between Pages](https://nextjs.org/learn/basics/navigate-between-pages)を学習します。

> - Create a new page using the integrated file system routing.
> - Learn how to use the Link component to enable client-side navigation between pages.
> - Learn about built-in support for code splitting and prefetching.

このチュートリアルでは、下記について学ぶことができます。
- 統合ファイルシステムルーティングを使用して新しいページを作成方法
- Linkコンポーネントを使用してページ間のクライアント側ナビゲーションを有効にする方法
- コード分​​割とプリフェッチの組み込みサポートについて

https://nextjs.org/learn/basics/navigate-between-pages

## ファイルシステムルーティングとは?
ファイルシステムルーティングは、Next.js独自のルーティング方法です。
ページは、ファイル名に基づいてルートに関連付けられます。

---
たとえば、
```pages/index.js```にページがあるとすると```/``` にルーティングされます。
```pages/posts/first-post.js``` にページがあるとすると``` /posts/first-post ```にルーティングされます。

---

React Routerを使っているときは、ルーティング設定を記載する必要があったので、設定を書かなくても自動的にルーティングしてくれるのは便利ですね！

https://qiita.com/YSasago/items/f00333b60a2b01be4bb7



# 早速やってみよう！

## 新しいページの作成
pagesフォルダの配下に```first-post.js```を作成し、```<h1>First Post</h1>```を返すコードを書きます。

>Create the posts directory under pages.
Create a file called first-post.js inside the posts directory with the following content:

```react
export default function FirstPost() {
  return <h1>First Post</h1>;
}
```

![スクリーンショット 2022-07-06 14.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/71635451-e135-4f14-8fa1-17f9df2a4e22.png)


```$ npm run dev```で実行し、[http://localhost:3000/posts/first-post](http://localhost:3000/posts/first-post) にアクセスします。

First Postと表示されました。ページ作成簡単ですね！

![スクリーンショット 2022-07-06 14.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/037d8e98-6894-47b9-d1c3-41fb73b9f41a.png)



## ページ遷移してみよう
Next.jsでは、ページ遷移の```Link```コンポーネントを使います。
```Link```コンポーネントを使うことで、ページの再読み込みをせずに画面遷移することができます。
↑　```Client-Side Navigation```という


ページ遷移をしたいページにLinkコンポーネントimportします。

```react
import Link from 'next/link';
```

下記のような感じに、aタグをLinkコンポーネントで囲ってあげます。

```react
// before
<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

// after
<h1 className="title">
  Learn
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>
```

### Client-Side Navigationってなあに？
Client-Side Navigationとは、 JavaScriptを使用してページ遷移が発生すること。
URLを切り替えてもページ```再読み込みが発生しない```ので、Client-Side Navigationは、ブラウザによって実行される```デフォルトのナビゲーションよりも高速```です。

> Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browse

また、```クライアントの状態を保って、ページ遷移させることができる```ことができます。

チュートリアルでは、developer toolsでTOPページの背景を黄色にして、ページ遷移させても背景黄色の状態であることを確かめるチュートリアルがあります。


TOPページの背景をdeveloper toolsで黄色にする
![スクリーンショット 2022-07-06 14.33.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/9e61638d-8aa9-006e-ac9f-7be52b3e7f79.png)

ページ遷移しても、背景は黄色のまま

![スクリーンショット 2022-07-06 14.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/54fe027b-5f5c-7e49-fe57-4d4a6d14c1e1.png)