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

はじめに

僕は普段 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にリポジトリを作成

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

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

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 にデプロイ → 独自ドメイン設定まで完了です。