Next.jsプロジェクトをVercelにデプロイする方法

## 目次
1. [イントロダクション](#イントロダクション)
2. [Next.jsのセットアップ](#nextjsのセットアップ)
    - [ステップ1: Next.jsのレシピ本を開く](#ステップ1-nextjsのレシピ本を開く)
    - [ステップ2: 材料（npmまたはyarn）の準備](#ステップ2-材料npmまたはyarnの準備)
    - [ステップ3: 新しいレシピを作る](#ステップ3-新しいレシピを作る)
    - [ステップ4: レシピをキッチンで作る](#ステップ4-レシピをキッチンで作る)
3. [Vercelとは](#vercelとは)
    - [Vercel社について](#vercel社について)
    - [ステップ5: コンテストに参加する](#ステップ5-コンテストに参加する)
4. [Vercelの使い方](#vercelの使い方)
    - [ステップ6: Vercelに登録する](#ステップ6-vercelに登録する)
    - [ステップ7: 自分のレシピをGitHubにアップロードする](#ステップ7-自分のレシピをgithubにアップロードする)
    - [ステップ8: VercelとGitHubを連携させる](#ステップ8-vercelとgithubを連携させる)
5. [デプロイの確認とコードの変更](#デプロイの確認とコードの変更)
    - [ステップ9: 変更を反映させる](#ステップ9-変更を反映させる)
6. [結論](#結論)

## イントロダクション

こんにちは、おばあちゃん。今日は「Next.js」という最新のクッキーのレシピを、世界中の人々に見てもらえるように「Vercel」というオンライン料理コンテストに出品する方法を教えます。

## Next.jsのセットアップ

### ステップ1: Next.jsのレシピ本を開く

まず、Next.jsという最新のクッキーのレシピ本を開きます。これがインターネット上にあるので、以下のリンクをクリックして開いてみましょう：

[Next.jsドキュメント](https://nextjs.org/docs/getting-started)

![2024-06-28 18.01の画像.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/58499f73-6f84-1586-b8d6-9eb7a132da05.jpeg)

### ステップ2: 材料（npmまたはyarn）の準備

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/0944ef0d-b9b9-335c-07e7-e464526d07b0.png)

次に、このレシピを作るための材料を用意します。ここでは「npm」または「yarn」という特別な材料が必要です。これらがキッチン（パソコン）にあるか確認するために、キッチンの棚（ターミナル）で以下のように確認します：

- npmがあるか確認するには、「npm -v」と言ってみます。
- yarnがあるか確認するには、「yarn -v」と言ってみます。

どちらかがあればOKです。今回は「yarn」を使います。

### ステップ3: 新しいレシピを作る

今から、新しいレシピを作ります。次の呪文のような言葉をキッチンの棚（ターミナル）で唱えます：

```bash
yarn create next-app
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/f192a505-6c8b-b315-dc7f-e53cd3c681ec.png)


この呪文を唱えると、レシピの名前を聞かれますので、「magic-cookie」と答えます。すると、新しいレシピのフォルダが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/8d5b1df2-96c1-0504-51bb-f662d557cac4.png)

### ステップ4: レシピをキッチンで作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/584cb364-d3f8-f991-fa56-da0960dbd883.png)

フォルダができたら、その中に入ってレシピを作ります。次の呪文を唱えてください：

```bash
cd magic-cookie
yarn dev
```

これでレシピが動き始めます。

おばあちゃんが作ったクッキーを確認するために、インターネットブラウザで「localhost:3000」にアクセスすると「Welcome to Next.js」と表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/7bfdf35c-9b96-fff4-6c5c-e859bca1ee03.png)

## Vercelとは

![Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/e84d8e8f-0b0b-aaea-4985-d6a2edf97674.png)

### Vercel社について

Vercelは、ウェブ開発者が簡単にプロジェクトをデプロイ（公開）し、運用できるプラットフォームを提供している会社です。彼らは特に、フロントエンド開発を簡単かつ効率的にするためのツールを開発しています。Vercelは、Next.jsというフレームワークを開発しており、これを使うことで、開発者は高性能でスケーラブルなウェブアプリケーションを簡単に作成できます。

Next.jsは、Reactという人気のあるJavaScriptライブラリの上に構築されています。Reactは、Facebookが開発したもので、ウェブアプリケーションのインターフェースを作成するために広く使用されています。Vercelは、このReactの利便性と機能性をさらに高めるためにNext.jsを作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/bb6fbbe2-e37f-6066-bcd1-79298d6eff09.png)

Vercelのプラットフォームは、特にデプロイのプロセスを簡素化し、自動化することに重点を置いています。これにより、開発者は自分のコードをすぐに公開し、世界中のユーザーに届けることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/db7fcaa0-caf2-2c4a-61e2-d1f4a086299a.png)

### ステップ5: コンテストに参加する

次に、このクッキーを料理コンテスト（Vercel）に出品します。Vercelは、たくさんの人が自分のクッキーを見せるための大きな会場（ウェブサイト）です。おばあちゃんのクッキーもここに出せば、みんなに見てもらえます。

## Vercelの使い方

### ステップ6: Vercelに登録する

まず、Vercelのサイトに行って、参加登録（Sign Up）をします。以下のリンクから登録できます：

[Sign Up](https://vercel.com/signup)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/3e710fbf-f378-d152-cae0-31da95993b4a.png)


登録が終わったら、ログインします。GitHubというキッチンノートを使ってログインします。

### ステップ7: 自分のレシピをGitHubにアップロードする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/569ad1ed-ef68-4f2a-96a1-9fee4d069a8a.png)

次に、おばあちゃんのレシピをGitHubというノートに書き込みます。これをすることで、Vercelと連携してコンテストに出品しやすくなります。まず、GitHubに新しいノート（リポジトリ）を作ります。ノートの名前は「magic-cookie」とします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/fdf7de5d-6e15-798b-64cc-44b6c9fd9fee.png)

次に、以下の呪文を唱えてレシピをGitHubにアップロードします：

```bash
git init
git add .
git commit -m "Initial commit"
git remote add origin <GitHubリポジトリのURL>
git branch -M main
git push -u origin main
```

これでレシピがGitHubに保存されました。

### ステップ8: VercelとGitHubを連携させる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/4499f22a-9a00-67fa-187d-fbd7261db37c.png)

今度は、Vercelに戻り、新しいプロジェクトを作ります。先ほど作ったGitHubの「magic-cookie」を選択してインポートします。プロジェクトの名前を決め、デプロイ（出品）を開始します。デプロイが完了すると、Vercelのダッシュボードからプロジェクトの状態を確認できます。

## デプロイの確認とコードの変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/9fc35d2b-d15e-94a2-214f-3671b1758eed.png)

### ステップ9: 変更を反映させる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/fc8d8281-5b8d-bbd9-5081-90dc10830c78.png)

ここまでで、おばあちゃんのクッキーがVercelに出品されました。次に、レシピに変更を加えて、コンテスト会場（ウェブサイト）に反映させます。例えば、「Welcome to Next.js」を「Hello」に変更します。次のようにコードを変更します：

```jsx
// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}
```

変更後、再度GitHubにプッシュします：

```bash
git add .
git commit -m "Update welcome message"
git push
```

これで、Vercelのダッシュボードで自動的に変更が反映されます。

## 結論

おばあちゃん、これでお料理（Next.jsのプロジェクト）を料理コンテスト（Vercel）に出品して、みんなに見てもらえるようになりましたね。Next.jsとVercelを組み合わせることで、簡単にモダンな開発環境を構築でき、無料で利用可能です。ぜひ、楽しんで新しいレシピを作ってみてくださいね。

ご拝読ありがとうございました。

内容が良かった人はフォローをよろしくお願いします。