【Next.js × TypeScript】2時間で作れるカウントアプリを作ってみた

🎯 この記事の目的

• Next.js（App Router構成）とTypeScriptで簡単なアプリを作ってみたい方に向けて
• useStateフックや'use client'ディレクティブなど、基本概念のアウトプット
• 実際の手順とコードをシンプルにまとめます

---

🛠 使用技術

• Next.js 15（App Router構成）
• TypeScript
• React（useState）

---

📁 プロジェクト作成手順

まず、以下の内容を入力してプロジェクトの作成をします。

npx create-next-app@latest my-counter-app
# 質問には以下のように回答：
# TypeScript → Yes
# ESLint → No
# Tailwind → No（任意）
# srcディレクトリ → No
# App Router → Yes
# Turbopack → No

その後、プロジェクトに移動して開発サーバーを起動をします。

cd my-counter-app
npm run dev

---

コードの修正

このままだとエラーが起きたため、app/page.tsx を以下のように修正します。

'use client';
import React, { useState } from 'react';

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

  return (
    <main style={{ textAlign: 'center', marginTop: '100px' }}>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>＋</button>
      <button onClick={() => setCount(count - 1)}>−</button>
    </main>
  );
}

最後に動作確認をするためにサーバーを起動して確認します。

npm run dev

🖥 実際の画面（スクリーンショット）

実際に開くとこのような画面が出てきます。

プラスを押すと1ずつ増えます。

マイナスを押せば一ずつ減ります。

これで完成しました！

🧠 学んだこと・詰まったこと

• use client を書かないと useState が使えずエラーになる
• app/page.js が残っていると Duplicate page 警告が出る
• JSXを使うには tsconfig.json に "jsx": "react-jsx" の設定が必要

---

🚀 今後やってみたい拡張

• かなり簡易的に行ったため、Tailwind CSSでスタイリングを改善

• useEffectを使ってローカルストレージに保存

• API Routeと連携してデータ取得

---

📝 まとめ

• Next.jsのApp Router構成＋TypeScriptでの開発が思ったより簡単

• 小さくても「動くもの」を作ることで、インプットがアウトプットに変わる実感が得られた

• 今後も少しずつ記事を書いていきたい

---