【簡易】Next.jsアプリを作成・デプロイする流れ(GitHub + Vercel)

# はじめに
僕は普段 Vue.js や Nuxt.js を使うことが多いですが、React.js や Next.js を触ったことがありませんでした。  
そこで、Next.js を使って簡単なカウントアップアプリを作成し、
**GitHub にプッシュ → Vercel でデプロイ** までの流れをまとめました。  
このメモは **Next.js を初めて触る人向け** に、シンプルな手順を整理したものです。

## 1. Next.js の環境構築
Next.jsのプロジェクトを作成します。

```bash
$ npx create-next-app@latest sampleapp --typescript
$ cd sampleapp
$ npm run dev
```
**質問一覧と意味・おすすめの回答**  

| 質問 | 意味 | 推奨回答 |
|------|------|----------|
| `Would you like to use TypeScript?` | TypeScript を使うか | `Yes`|
| `Would you like to use ESLint?` | コードの品質チェック（ESLint）を有効にするか | `Yes` |
| `Would you like to use Tailwind CSS?` | Tailwind CSS を使うか | `Yes` |
| `Would you like your code inside a src/ directory?` | `src/` ディレクトリの中にコードを配置するか | `No` |
| `Would you like to use App Router? (recommended)` | **App Router（推奨）を使うか** | `Yes` |
| `Would you like to use Turbopack for next dev?` | `next dev` で Turbopack（高速ビルドツール）を使うか | `Yes` |
| `Would you like to customize the import alias (@/* by default)?` | `@/components` などのエイリアスをカスタマイズするか | `No`（|

プラウザで`http:/localhost:3000`にアクセスし、Next.jsの初期画面が表示されることを確認。

## 2. カウントアップ機能の実装
Next.js (App Router)を使用し、シンプルなカウントアップ機能を実装します。
```app/page.tsx
'use client';

import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState<number>(0);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>HabitUp</h1>
      <p>今日のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}
```
`npm run dev`を実行し、ボタンを押してカウントボタンが増えることを確認

## 3.GitHubにプッシュ
Next.js プロジェクトをGitHubで管理できるようにします。
### Gitの初期化
```bash
$ git init
$ git add .
$ git commit -m 'inital commit'
```
### GitHubにリポジトリを作成
1. Githubにログインし、新しいリポジトリ`sampleapp`を作成
1. 作成したリポジトリをリモートリポジトリとして追加
```bash
$ git push -u origin main
```
`git push` でエラーが発生した場合のトラブルシューティング

https://qiita.com/upYoshi/items/93df45b830961a02ffae

## 4.Vercelにデプロイ
### Vercel CLIをインストール
```bash
$ npm i -g vercel
```

### Vercelにデプロイ
```
$ vercel
```
**質問と回答**
| 質問 | 回答 |
|------|------|
| `Set up and deploy "habitup"?` | `y` |
| `Which scope do you want to deploy to?` | 自分のVercelアカウント |
| `Link to existing project?` | `n` |
| `What’s your project’s name?` | `habitup` |
| `In which directory is your code located?` | `./` |
| `Configure as TypeScript project?` | `y` |
| `Want to modify these settings?` | `n` |


デプロイ完了後、URL(`https://sampleapp.vercel.app`)にアクセスして動作確認。


## 5. 【応用】独自ドメインの設定（サブドメイン）
### **Vercel にドメインを追加**
1. **Vercel の `Settings` → `Domains` に移動**
2. **「Add a Domain」 をクリック**
3. **サブドメイン (`sampleapp.example.com`) を入力**
4. **「Add」 を押す**

### **ムームードメインで DNS 設定**
1. ムームードメインにログインし、「ムームーDNS」 を開く
2. `sampleapp.example.com` の CNAME を追加：
   - **タイプ:** `CNAME`
   - **ホスト名:** `sampleapp`
   - **内容:** `cname.vercel-dns.com`
   - **TTL:** `3600`

3. Vercel の `Domains` ページで「Verify」 を押す。

**成功すると `sampleapp.example.com` でアプリにアクセスができる

---

## **まとめ**
| ステップ | やること |
|----------|---------|
| **1. Next.js の環境構築** | `npx create-next-app@latest sampleapp --typescript` |
| **2. カウントアップ機能の実装** | `app/page.tsx` を編集 |
| **3. GitHub にプッシュ** | `git add . && git commit -m "inital commit" && git push origin main` |
| **4. Vercel にデプロイ** | `npm i -g vercel && vercel` |
| **5. 【応用】サブドメインの設定** | Vercel + ムームードメインで CNAME 設定 |

Next.js のカウントアップアプリを作成 → GitHub 管理 → Vercel にデプロイ → 独自ドメイン設定まで完了です。