🔥

【Next.js+Supabase+Prisma】サクッとVercelにデプロイしてみた ①環境構築編

2025/01/05に公開

Next.js

背景

Next.jsのみで完結する簡単なアプリを開発したいなーと思い、その際の環境構築〜認証実装〜デプロイまでの流れについて備忘録を残そうと思いました。

全体を通してハマりポイントなどはあまりなく、基本的に公式や参考記事に載っている手順に従うことでササっと構築できた印象です。

開発したアプリ

https://loanlog.vercel.app/

知人間で分割支払いの管理ができるアプリです。せっかく作ったので一応ご紹介をば。

友人にお高い服を売ってもらい、たびたびご飯などを奢ることで支払っていくことがあるため、その支払い管理のために作りました。貸し借りの管理アプリは色々あったのですが、分割払いの管理アプリはなかったので…。

ユースケースが特殊すぎるため需要はあまりなさそうなので、完全に個人で使う用のアプリです😅

（ちなみにスマホで表示することしか想定していないため、PCで開くとUIが崩れます…。フロントの開発経験があまりないため、AI頼りでガンガン実装しました。開発期間は大体2週間くらいでした。）

手順

1. プロジェクトの作成

まず、Next.jsプロジェクトを作成します。TypeScriptとTailwind CSSを初期設定で含めます：

npx create-next-app@latest my-project --typescript --tailwind --eslint
cd my-project

以下の質問が表示されたら、必要に応じて選択してください：

Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes
Would you like to use src/ directory? › Yes
Would you like to use App Router? › Yes
Would you like to customize the default import alias? › No

app routerで実装していきます。

2. Supabaseのセットアップ

2.1 Supabaseプロジェクトの作成

Supabase（https://supabase.com）にアクセスしてアカウントを作成
新しいプロジェクトを作成
プロジェクト作成後、Project Settings > API から接続情報を取得

2.2 Supabaseクライアントライブラリのインストール

npm install @supabase/supabase-js

2.3 環境変数の設定

プロジェクトのルートディレクトリに .env.local ファイルを作成：

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

2.4 Supabaseクライアントの設定

src/lib/supabase.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)

3. Prismaのセットアップ

3.1 Prismaのインストール

npm install prisma --save-dev
npm install @prisma/client

3.2 Prismaの初期化

npx prisma init

3.3 データベース接続の設定

.env ファイルにデータベースURLを設定（Supabaseのプロジェクト設定から取得）：

DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"

3.4 Prismaスキーマの作成

prisma/schema.prisma を編集：

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// ここにモデルを追加
model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

3.5 Prismaクライアントの設定

src/lib/prisma.ts を作成：

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

3.6 データベースの同期

npx prisma generate
npx prisma db push

4. 動作確認

4.1 APIルートの作成

src/app/api/users/route.ts を作成：

import { NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'

export async function GET() {
  try {
    const users = await prisma.user.findMany()
    return NextResponse.json(users)
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
  }
}

4.2 適当な画面の実装例

src/app/page.tsx を編集：

'use client'

import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function Home() {
  const [users, setUsers] = useState([])

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('/api/users')
      const data = await response.json()
      setUsers(data)
    }

    fetchUsers()
  }, [])

  return (
    <main className="min-h-screen p-24">
      <h1 className="text-4xl font-bold mb-8">Users</h1>
      <div className="space-y-4">
        {users.map((user: any) => (
          <div key={user.id} className="p-4 border rounded">
            <p className="font-bold">{user.name}</p>
            <p className="text-gray-600">{user.email}</p>
          </div>
        ))}
      </div>
    </main>
  )
}

これで基本的な環境構築は完了です。アプリケーションを起動するには：

npm run dev

まとめ

非常に簡単に環境構築することができました。
続いてGoogle認証、Vercelデプロイの記事を上げていきたいと思います。

背景