ハッカソン個人備忘録㉖：Next.js + TypeScript の環境構築手順とポエム認証実装に向けて

はじめに

このドキュメントでは、Next.js + TypeScript 環境構築手順を個人の備忘録としてまとめています。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

初めての方でも迷わずセットアップできるよう、コマンドの実行例やディレクトリ構成も含めて丁寧に解説しています。

書こうと思ったきっかけ

最近、「ポエム認証」アプリの開発に取り組む機会があり、Next.js + TypeScript の環境を構築しました。その際に得た知見を忘れないうちにまとめておこうと思い、この手順書を作成しました。これから始める方や、同様の構成で開発したい方の参考になれば幸いです。

---

前提条件

Node.js（18.x 以上推奨）がインストールされていること。

確認方法：

node -v
npm -v

インストールされていない場合は、Node.js公式サイトから「LTS版」をインストールしてください。

---

手順①：プロジェクトの作成

以下のコマンドで Next.js + TypeScript のプロジェクトを作成します：

npx create-next-app@latest poem-auth-app1 --typescript
cd poem-auth-app1

--typescript をつけることで、最初から TypeScript 対応のプロジェクトが作られます。

---

手順②：ディレクトリ構成（自動で生成される）

poem-auth-app1/
├── pages/          ← 画面ごとのファイル（`index.tsx` など）
├── public/         ← 画像やフォントなどを配置
├── styles/         ← CSSファイル
├── tsconfig.json   ← TypeScript設定ファイル
├── next.config.js  ← Next.jsの設定ファイル
├── package.json    ← パッケージ管理ファイル
└── ...

---

手順③：開発サーバー起動

以下のいずれかのコマンドで開発サーバーを起動：

npm run dev

または

yarn dev

以下のURLでブラウザからアクセスできます：
http://localhost:3000

---

手順④：画面を作ってみよう

pages/index.tsx を以下の内容に差し替えて、ポエム認証のUIを表示できます（TypeScript版）

pages/index.tsx

import { useState, ChangeEvent } from "react";

const LoginPoemAuth = () => {
  const [step, setStep] = useState<number>(1);
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [selectedPoem, setSelectedPoem] = useState<string>("");

  const poems: string[] = [
    "空を見上げて、今日も笑おう",
    "君の歩幅で、ゆっくり進もう",
    "風が背中を押してくれる",
  ];

  const handleLoginStep1 = async () => {
    // 本来はここでバックエンドにusernameとpasswordを送信
    // 成功したらstep2へ
    setStep(2);
  };

  const handleLoginStep2 = async () => {
    // 本来はtoken + poemを使って認証
    alert(`ポエム \"${selectedPoem}\" を選んでログインしました！`);
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4">
      {step === 1 && (
        <div className="w-full max-w-sm space-y-4">
          <h1 className="text-xl font-bold">ログイン - ステップ1</h1>
          <input
            type="text"
            placeholder="ユーザ名"
            value={username}
            onChange={(e: ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
            className="w-full p-2 border rounded"
          />
          <input
            type="password"
            placeholder="パスワード"
            value={password}
            onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
            className="w-full p-2 border rounded"
          />
          <button onClick={handleLoginStep1} className="w-full bg-blue-500 text-white p-2 rounded">
            次へ
          </button>
        </div>
      )}

      {step === 2 && (
        <div className="w-full max-w-sm space-y-4">
          <h1 className="text-xl font-bold">ログイン - ステップ2（ポエム選択）</h1>
          <select
            value={selectedPoem}
            onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedPoem(e.target.value)}
            className="w-full p-2 border rounded"
          >
            <option value="">-- ポエムを選択 --</option>
            {poems.map((poem, idx) => (
              <option key={idx} value={poem}>
                {poem}
              </option>
            ))}
          </select>
          <button onClick={handleLoginStep2} className="w-full bg-green-500 text-white p-2 rounded">
            ログイン
          </button>
        </div>
      )}
    </div>
  );
};

export default LoginPoemAuth;

※ TypeScript版のUIコードはこのあと貼り付けてください。

保存すると即時ブラウザが更新されます（ホットリロード機能）。

ブラウザで http://localhost:3000 にアクセスすれば、ステップ1 → ステップ2のポエム認証画面が動作します。

実際のログイン画面

実際のポエム認証画面

---

まとめ

Next.js と TypeScript を使った開発環境は、非常に整っていて快適です。

とくに create-next-app のおかげで、数分でプロジェクトを立ち上げられます。

この手順を元に、認証機能やデザインのカスタマイズ、バックエンド連携なども柔軟に進めていけるはずです。ぜひ、自由な発想でアプリケーション開発を楽しんでください！