Next.jsってなに？

## 目次
1. [Next.jsってなに？](#nextjsってなに)
   - [概要](#概要)
   - [どんな背景があるの？](#どんな背景があるの)
2. [Next.jsのすごいところ](#nextjsのすごいところ)
   - [サーバーサイドレンダリング（SSR）](#サーバーサイドレンダリングssr)
   - [静的サイト生成（SSG）](#静的サイト生成ssg)
   - [クライアントサイドレンダリング（CSR）](#クライアントサイドレンダリングcsr)
   - [自動コード分割](#自動コード分割)
   - [APIルート](#apiルート)
   - [開発者体験の向上](#開発者体験の向上)
3. [Next.jsの基本的な使い方](#nextjsの基本的な使い方)
   - [セットアップ](#セットアップ)
   - [ページの作成](#ページの作成)
   - [サーバーサイドレンダリングの設定](#サーバーサイドレンダリングの設定)
   - [静的サイト生成の設定](#静的サイト生成の設定)
   - [APIルートの作成](#apiルートの作成)
4. [結論](#結論)

## Next.jsってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/dc4411c3-4aa0-e5a9-2c70-723de8800e6f.png)

### 概要

Next.js（ネクストジェイエス）は、インターネットのホームページを簡単に作れるようにするためのすごい道具箱です。たとえば、レゴブロックを使っていろんなものを作るみたいに、Next.jsを使ってかっこいいホームページを作ることができます。この道具箱は、「React（リアクト）」という人気のあるブロックを使っていて、もっと簡単に使えるようにしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/0829e6e5-1911-cbc6-b3c5-24330594c8ae.png)

### どんな背景があるの？

Next.jsは、Vercel（ヴァーセル）という会社が作りました。Vercelは、みんなが簡単に自分のホームページをインターネットで見せられるようにするためのサービスを提供しています。Reactを使ってホームページを作るのはすごく人気なんだけど、Next.jsを使うともっと簡単に便利に作れるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/b8b350fd-54ba-134d-7445-336b2ce892ad.png)

## Next.jsのすごいところ

### サーバーサイドレンダリング（SSR）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/85209447-90ac-50ae-e7a1-984e4b6be30f.png)

例えば、お店でケーキを注文するとき、店員さんがその場でケーキを作ってすぐに渡してくれる感じです。これがサーバーサイドレンダリングです。サーバー（お店）がホームページを作ってから、みんなに見せてくれます。これで、ホームページがすぐに表示されて、検索エンジン（グーグルとか）にも優しいんです。

サーバーは、インターネット上で動いている特別なコンピュータのことです。このコンピュータがホームページを作ってくれます。

### 静的サイト生成（SSG）

おばあちゃんが前もってたくさんのクッキーを焼いて、缶に入れて保存しておくようなものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/19d1e78f-7db9-f294-1cb7-f9536c62a58a.png)

これが静的サイト生成です。あらかじめホームページを作っておいて、誰かが見たいときにすぐ見せられるようにします。これで、ページがとても速く表示されて、たくさんの人が見ても大丈夫です。

静的サイトは、あらかじめ作られたホームページのことです。動的サイトは、見る人の要求に応じてその場で作られるページです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/2dbf179f-d73a-0078-2c3f-4e2beb725af5.png)

### クライアントサイドレンダリング（CSR）

おばあちゃんがクッキーの材料を渡して、自分でクッキーを焼くように言う感じです。これは、ユーザー（ホームページを見る人）のパソコンやスマホでホームページを作る方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/72dd2e97-476d-393e-a54f-844e28058261.png)

クライアントは、あなたのパソコンやスマホのことです。クライアントサイドレンダリングは、クライアント側でページを作ることを意味します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/cefc3bd0-2f18-bd1c-fe4e-59489fd2c7da.png)

### 自動コード分割

おばあちゃんがクッキーを配るとき、一度に全部のクッキーを渡すのではなく、必要なクッキーだけを渡す感じです。これで、ホームページが軽くて速くなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/a4240e18-940e-bce7-aa51-f69c28e5b057.png)

コード分割は、ホームページを作るためのプログラムを小さく分けて、必要な部分だけを読み込むことです。これにより、ページの表示が速くなります。

### APIルート

おばあちゃんがクッキーのレシピを教えるための特別な窓口を作る感じです。Next.jsでは、データをやり取りするための特別な場所（APIエンドポイント）を簡単に作ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/43ad8d4e-41ca-dfb3-564a-54fba952101f.png)

API（エーピーアイ）は、アプリケーションプログラミングインターフェースの略で、プログラム同士がデータをやり取りするための方法です。

### 開発者体験の向上

おばあちゃんが料理を作るときに、レシピが常に最新の状態に更新されて、必要な道具がすぐに手に入る感じです。これで、ホームページを作る人が便利に作れるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/ccefe528-755a-13a8-9629-56f2fe527106.png)

開発者体験（DX）は、プログラムを作る人がどれだけ快適に作業できるかを指します。Next.jsはこれを向上させるための機能がたくさんあります。

## Next.jsの基本的な使い方

### セットアップ

Next.jsのプロジェクトを始めるには、以下の呪文を使います。これで必要な設定が自動的に行われます。

```bash
npx create-next-app my-next-app
cd my-next-app
npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/5e658a4a-1312-97ff-9dfa-1db4dbc652fc.png)

`npx create-next-app`は、Next.jsの新しいプロジェクトを作るコマンドです。`cd my-next-app`は、新しいプロジェクトのフォルダに移動するコマンドです。`npm run dev`は、プロジェクトを起動して開発を始めるためのコマンドです。

### ページの作成

Next.jsでは、`pages`フォルダにファイルを作ると、新しいページができます。例えば、`pages/index.js`を作ると、トップページになります。

```jsx
// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}
```

`pages`フォルダにファイルを置くと、自動的にそのファイルがホームページのページになります。`index.js`は、トップページ（最初に表示されるページ）です。

### サーバーサイドレンダリングの設定

特定のページでSSRを使うには、`getServerSideProps`という関数を作ります。これで、そのページを開くたびに新しいデータを取得して表示します。

```jsx
// pages/ssr.js
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return {
    props: {
      data,
    },
  };
}

export default function SSRPage({ data }) {
  return (
    <div>
      <h1>Server Side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
```

`getServerSideProps`は、ページを表示するたびにサーバーからデータを取得する関数です。この関数が返すデータは、そのページのコンポーネントに渡されます。

### 静的サイト生成の設定

特定のページでSSGを使うには、`getStaticProps`という関数を作ります。これで、ビルド時にデータが取得され、静的なHTMLが生成されます。

```jsx
// pages/ssg.js
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return {
    props: {
      data,
    },
  };
}

export default function SSGPage({ data }) {
  return (
    <div>
      <h1>Static Site Generation

</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
```

`getStaticProps`は、ページをビルドするときに一度だけ実行される関数です。この関数が返すデータは、静的なHTMLとして保存されます。

### APIルートの作成

Next.jsでは、`pages/api`フォルダにファイルを作ると、APIエンドポイントを作ることができます。

```javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/e48c53d8-dbe6-037a-9663-1d4da34d8c41.png)

`pages/api`フォルダにファイルを置くと、そのファイルがAPIエンドポイントになります。`handler`関数は、リクエスト（誰かがデータを要求すること）に応じてレスポンス（データを返すこと）を返します。

## 結論

Next.jsは、ホームページやウェブアプリを作るための便利な道具箱です。いろんな便利な機能が詰まっていて、高性能なホームページを簡単に作ることができます。