はじめに
僕は普段 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)を使用し、シンプルなカウントアップ機能を実装します。
'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 にデプロイ → 独自ドメイン設定まで完了です。