はじめに

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

1. Next.js の環境構築

Next.jsのプロジェクトを作成します。

$ 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の初期化

$ git init
$ git add .
$ git commit -m 'inital commit'

GitHubにリポジトリを作成

Githubにログインし、新しいリポジトリsampleappを作成
作成したリポジトリをリモートリポジトリとして追加

$ git push -u origin main

git push でエラーが発生した場合のトラブルシューティング

4.Vercelにデプロイ

Vercel CLIをインストール

$ 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 にドメインを追加

Vercel の Settings → Domains に移動
「Add a Domain」をクリック
サブドメイン (sampleapp.example.com) を入力
「Add」を押す

ムームードメインで DNS 設定

ムームードメインにログインし、「ムームーDNS」を開く
sampleapp.example.com の CNAME を追加：
- タイプ: CNAME
- ホスト名: sampleapp
- 内容: cname.vercel-dns.com
- TTL: 3600
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 にデプロイ → 独自ドメイン設定まで完了です。