Zenn
🦁

習慣トラッカーを作るためのモダン開発環境構築記録（Next.js + Prisma + Supabase）

に公開
エンジニア
転職
web開発
tech

はじめに

目的

転職活動を目的としてアプリを作成しますが、せっかく作るならアイデアも取り入れようと思います。アイデアは別途記事でまとめる予定です。WEBサイト制作しかしてこなかったので、多少の不安はあるものの、アウトプットをしっかり行なって知見を広げていこうと思います。

1. Homebrewの導入と確認

✅ 作業内容

  • brew コマンドが使えなかったため、Homebrew を新規インストール

🎯 目的

  • MacでNode.jsやPostgreSQLなどの開発ツールを簡単に管理・導入するため

2. Node.jsのインストール

✅ コマンド

brew install node

🎯 目的

  • JavaScript/TypeScriptでアプリ開発・実行を可能にするため（Next.js, Prismaなどの実行環境）

3. Next.js プロジェクトの作成

✅ コマンド

npx create-next-app@latest

✅ 選択オプション

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ ディレクトリ: Yes
  • App Router: Yes
  • Turbopack: No
  • Import alias: No（@/* を使用）

🎯 目的

  • フロントエンドのベースを整備し、型安全かつスタイリングしやすい環境を構築するため

4. 開発サーバー起動確認

✅ コマンド

npm run dev

🎯 目的

  • フロントエンドが正常に起動するか、初期状態で表示確認する

5. Prisma 導入と初期設定

✅ コマンド

npm install prisma --save-dev
npx prisma init

🎯 目的

  • PostgreSQLとのやり取りを安全かつ簡潔に行えるORM（Prisma）を導入するため

6. PostgreSQLのインストールと起動

✅ コマンド

brew install postgresql
brew services start postgresql
createdb mydb

🎯 目的

  • Prismaが利用するローカルのデータベースを準備し、データ保存ができる状態にする

7. Prisma マイグレーション（接続テスト）

✅ コマンド

npx prisma migrate dev --name init

🎯 目的

  • Prisma が schema.prisma の定義を元に、実際にDBにテーブルを作成できるか確認する

8. Supabase 導入（認証機能の準備）

✅ コマンド

npm install @supabase/supabase-js

✅ 環境変数 .env に追加

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxx

✅ クライアントファイル src/lib/supabaseClient.ts 

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

🎯 目的

  • メールログインなどの認証を、簡単に安全に実装するための基盤として Supabase Auth を準備する

9. 認証UIの仮作成（OTPログイン）

✅ 実装コード（例: app/login/page.tsx）

'use client'
import { useState } from 'react'
import { supabase } from '@/lib/supabaseClient'

export default function LoginPage() {
  const [email, setEmail] = useState('')

  const handleLogin = async () => {
    await supabase.auth.signInWithOtp({ email })
    alert('ログインリンクを送信しました')
  }

  return (
    <div className="p-4">
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="border p-2 rounded"
        placeholder="メールアドレス"
      />
      <button onClick={handleLogin} className="ml-2 bg-blue-500 text-white px-4 py-2 rounded">
        ログイン
      </button>
    </div>
  )
}

🎯 目的

  • ユーザーがメールアドレスでログインできるフロー（OTP）を構築し、認証機能を確認する

Next Step

  • 次はモデル設計になると思います。早くUI実装して形にしていきたい。ここまでの内容をcommitしてremoteにpush完了。近々gitのissue管理とブランチの命名規則の整理や、backlogやtrelloなどのタスク管理との連携も行いたい。（あまりここに時間を費やさない程度に、、、）

Discussion