10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-03-12

はじめに

僕は普段 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 の SettingsDomains に移動
  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 にデプロイ → 独自ドメイン設定まで完了です。

10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?