Next.jsでPrismaからSupabaseを操作してみる

Prismaを使用してSupabaseを操作する簡易的なToDoリストをNext.jsで構築してみます。

主に使用するものは以下になります。

• Next.js v14.2.5（App Router）
• Prisma v5.18.0
• Prisma Client v5.18.0
• Supabase
• TypeScript v5
• shadcn/ui（Tailwind CSS v3.4.1）

• Prisma 7から、Prisma Clientの作成にドライバーアダプター（PostgreSQLは@prisma/adapter-pg）が必須になりました。データベースの接続先はschema.prismaではなくprisma.config.tsに書き、generatorのproviderはprisma-clientが推奨です。
• Next.js 15から、Route HandlerのparamsはPromiseになりました。const { id } = await params;のようにawaitしてから使います。
• shadcn/uiのCLIは、パッケージ名がshadcn-uiからshadcnに変わりました。新しいプロジェクトはTailwind CSS v4が前提で、初期化のときの質問も変わっています。

Upgrade to Prisma ORM 7 | Prisma Documentation⁠（新しいタブで開く）

Prisma | Supabase Docs⁠（新しいタブで開く）

1. 以下のコマンドを実行しプロジェクトを作成します。ページのデザインを整えるためにshadcn/uiを追加でインストールしています。

   ターミナルbash · 3行折り返すコピー（ターミナル）

   $npx create-next-app@latest my-app --typescript --tailwind --eslint$cd my-app$npx shadcn@latest init

2. コマンド実行後の質問には以下のように回答します。

   テキストテキスト · 9行折り返すコピー（テキスト）

   1# Next.js2✔ Would you like to use `src/` directory? › Yes3✔ Would you like to use App Router? (recommended) › Yes4✔ Would you like to customize the default import alias (@/*)? › No56# shadcn/ui7✔ Which style would you like to use? › Default8✔ Which color would you like to use as base color? › Slate9✔ Would you like to use CSS variables for colors? … yes

3. このあとの実装で使うshadcn/uiのコンポーネント（Button・Input・Checkbox・Card）を追加します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npx shadcn@latest add button input checkbox card

4. Supabaseのダッシュボードにアクセスし、[New Project]を押し任意の組織（Organization）を選択します。

   Supabase⁠（新しいタブで開く）

   

5. プロジェクト名とパスワードを設定し、[Create new project]を押下します。

   

6. 次に以下のコマンドを実行してPrismaをインストールして初期化します。

   ターミナルbash · 2行折り返すコピー（ターミナル）

   $npm install prisma --save-dev$npx prisma init

7. Prismaからデータベースを操作するので、Prisma Clientも合わせてインストールします。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npm install @prisma/client

8. Supabaseで[Project Settings] > [Database]の[Connection String]を開き[URI]を選択し、記載されているURIをコピーして、接続モード別に.envのDATABASE_URLとDIRECT_URLに設定してください。URIの[YOUR-PASSWORD]は、プロジェクトの作成時に設定したパスワードに置き換えます。

   

   Connection StringでURIを選択する。Modeを切り替えて環境変数にそれぞれのURIを設定する。

   .env.env · 2行折り返すコピー（.env）

   1DATABASE_URL="" # Transaction接続プーラーのURIを設定します。2DIRECT_URL="" # Session接続プーラーのURIを設定します。

   補足

   2026年10月時点のSupabaseでは、接続文字列はプロジェクトのダッシュボードの[Connect]から確認します。Transaction接続プーラーのURIはポート番号が6543、Session接続プーラーのURIは5432です。DATABASE_URLに設定するTransaction接続プーラーのURIには、末尾に?pgbouncer=trueを付けます。

9. prisma/schema.prismaを開き、datasourceにdirectUrlを足して、必要なモデルを定義します。

   schema.prismaPrisma · 21行折り返すコピー（schema.prisma）

   1generator client {2  provider = "prisma-client-js"3}45datasource db {6  provider  = "postgresql"7  url       = env("DATABASE_URL")8  directUrl = env("DIRECT_URL")9}1011// 以下の記述を追加してください。12model Task {13  id        String  @id @default(cuid())14  title     String15  completed Boolean @default(false)1617  createdAt DateTime @default(now()) @map("created_at")18  updatedAt DateTime @updatedAt @map("updated_at")1920  @@map("task")21}

   残り 5 行を表示

10. 以下のコマンドを実行し、データベースマイグレーションを作成します。

    ターミナルbash · 1行折り返すコピー（ターミナル）

    $npx prisma migrate dev --name init

    • --name initでマイグレーションに「init」という名前をつけています。
11. 実行が完了すると、ほぼリアルタイムでSupabaseのTable Editorに追加したテーブルが反映されていることが確認できます。

    

    SupabaseのTable Editorにschema.prismaで設定したモデルが反映されている

シングルトンパターンを導入し、アプリケーション全体で単一のPrismaClientインスタンスを使用するようにします。

シングルトンパターン｜フロントエンドのデザインパターン⁠（新しいタブで開く）

1. 以下のコマンドを実行して、Prisma Clientの生成をおこないます。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npx prisma generate

2. src/libにprisma.tsを作成し、以下のコードを追加しシングルトンパターンを実現します。

   prisma.tsTypeScript · 15行折り返すコピー（prisma.ts）

   1import { PrismaClient } from '@prisma/client'23const prismaClientSingleton = () => {4  return new PrismaClient()5}67declare const globalThis: {8  prismaGlobal: ReturnType<typeof prismaClientSingleton>;9} & typeof global;1011const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()1213export default prisma1415if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

   コードは、Prismaの公式ドキュメントの記述に従っています。

   Comprehensive Guide to Using Prisma ORM with Next.js (Prisma ORM v7)⁠（新しいタブで開く）

3. src/app/api/tasksにroute.tsを作成し、以下のコードを追加します。

   route.tsTypeScript · 27行折り返すコピー（route.ts）

   1import prisma from "@/lib/prisma";2import { type NextRequest, NextResponse } from "next/server";34export async function GET(req: NextRequest) {5  try {6    const tasks = await prisma.task.findMany();7    return NextResponse.json(tasks);8  } catch (error) {9    console.error("Request error", error);10    return NextResponse.json({ error: "Error fetching tasks" }, { status: 500 });11  }12}1314export async function POST(req: NextRequest) {15  try {16    const body = await req.json();17    const newTask = await prisma.task.create({18      data: {19        title: body.title,20      },21    });22    return NextResponse.json(newTask, { status: 201 });23  } catch (error) {24    console.error("Request error", error);25    return NextResponse.json({ error: "Error creating tasks" }, { status: 500 });26  }27}

   残り 11 行を表示

4. src/app/api/tasks/[id]にroute.tsを作成し、以下のコードを追加します。

   route.tsTypeScript · 34行折り返すコピー（route.ts）

   1import { type NextRequest, NextResponse } from "next/server";2import prisma from "@/lib/prisma";34export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {5  try {6    const id = params.id;7    const { completed } = await req.json();89    const updatedTask = await prisma.task.update({10      where: { id },11      data: { completed },12    });1314    return NextResponse.json(updatedTask);15  } catch (error) {16    console.error("Error updating task:", error);17    return NextResponse.json({ error: "Failed to update task" }, { status: 500 });18  }19}2021export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {22  try {23    const id = params.id;2425    await prisma.task.delete({26      where: { id },27    });2829    return NextResponse.json({ message: "Task deleted successfully" });30  } catch (error) {31    console.error("Error deleting task:", error);32    return NextResponse.json({ error: "Failed to delete task" }, { status: 500 });33  }34}

   残り 18 行を表示

1. src/componentsにAddTask.tsxを作成し、以下のコードを追加します。

   AddTask.tsxTSX · 39行折り返すコピー（AddTask.tsx）

   1"use client";2import { Task } from "@prisma/client";3import React, { useState } from "react";4import { Button } from "@/components/ui/button";5import { Input } from "@/components/ui/input";67interface Props {8  onAdd: (title: Task["title"]) => void;9}1011export default function AddTask({ onAdd }: Props) {12  const [title, setTitle] = useState<Task["title"]>("");1314  /**15   * 新しいタスクを追加する16   *17   * @param e - フォーム送信イベント18   */19  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {20    e.preventDefault();21    if (title.trim()) {22      onAdd(title);23      setTitle("");24    }25  };2627  return (28    <form onSubmit={handleSubmit} className="flex space-x-2">29      <Input30        type="text"31        value={title}32        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}33        placeholder="Add a new task"34        className="flex-grow"35      />36      <Button type="submit">Add</Button>37    </form>38  );39}

   残り 23 行を表示

2. src/componentsにTaskItem.tsxを作成し、以下のコードを追加します。

   TaskItem.tsxTSX · 24行折り返すコピー（TaskItem.tsx）

   1import { Task } from "@prisma/client";2import React from "react";3import { Checkbox } from "@/components/ui/checkbox";4import { Button } from "@/components/ui/button";56interface Props {7  task: Task;8  onToggle: (id: Task["id"]) => void;9  onDelete: (id: Task["id"]) => void;10}1112export default function TaskItem({ task, onToggle, onDelete }: Props) {13  return (14    <div className="flex items-center justify-between py-2">15      <div className="flex items-center space-x-2">16        <Checkbox checked={task.completed} onCheckedChange={() => onToggle(task.id)} />17        <span className={task.completed ? "line-through" : ""}>{task.title}</span>18      </div>19      <Button variant="destructive" size="sm" onClick={() => onDelete(task.id)}>20        Delete21      </Button>22    </div>23  );24}

   残り 8 行を表示

3. src/componentsにTaskList.tsxを作成し、以下のコードを追加します。

   TaskList.tsxTSX · 106行折り返すコピー（TaskList.tsx）

   1"use client";2import { Task } from "@prisma/client";3import React, { useEffect, useState } from "react";4import AddTask from "@/components/AddTask";5import TaskItem from "@/components/TaskItem";6import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";78export default function TaskList() {9  const [tasks, setTasks] = useState<Task[]>([]);1011  useEffect(() => {12    fetchTasks();13  }, []);1415  /**16   * タスク一覧を取得する17   *18   * @throws {Error} タスクの取得に失敗した場合19   */20  const fetchTasks = async () => {21    try {22      const res = await fetch("/api/tasks");23      const data: Task[] = await res.json();24      setTasks(data);25    } catch (error) {26      console.error("タスクの取得に失敗しました:", error);27    }28  };2930  /**31   * 新しいタスクを追加する32   *33   * @param title - 新しいタスクのタイトル34   * @throws {Error} タスクの追加に失敗した場合35   */36  const addTask = async (title: Task["title"]) => {37    try {38      const res = await fetch("/api/tasks", {39        method: "POST",40        headers: { "Content-Type": "application/json" },41        body: JSON.stringify({ title }),42      });43      const newTask: Task = await res.json();44      setTasks([...tasks, newTask]);45    } catch (error) {46      console.error("タスクの追加に失敗しました:", error);47    }48  };4950  /**51   * タスクの完了状態を切り替える52   *53   * @param id - 更新するタスクのID54   * @throws {Error} タスクの更新に失敗した場合55   */56  const toggleTask = async (id: Task["id"]) => {57    try {58      const task = tasks.find((task) => task.id === id);59      if (!task) return;6061      const res = await fetch(`/api/tasks/${id}`, {62        method: "PUT",63        headers: { "Content-Type": "application/json" },64        body: JSON.stringify({ completed: !task.completed }),65      });66      if (res.ok) {67        setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task)));68      }69    } catch (error) {70      console.error("タスクの切り替えに失敗しました:", error);71    }72  };7374  /**75   * タスクを削除する76   *77   * @param id - 削除するタスクのID78   * @throws {Error} タスクの削除に失敗した場合79   */80  const deleteTask = async (id: Task["id"]) => {81    try {82      const res = await fetch(`/api/tasks/${id}`, { method: "DELETE" });83      if (res.ok) {84        setTasks(tasks.filter((task) => task.id !== id));85      }86    } catch (error) {87      console.error("タスクの削除に失敗しました:", error);88    }89  };9091  return (92    <Card className="w-full max-w-md mx-auto mt-10">93      <CardHeader>94        <CardTitle>ToDo List</CardTitle>95      </CardHeader>96      <CardContent>97        <AddTask onAdd={addTask} />98        <div className="mt-4 space-y-2">99          {tasks.map((task) => (100            <TaskItem key={task.id} task={task} onToggle={toggleTask} onDelete={deleteTask} />101          ))}102        </div>103      </CardContent>104    </Card>105  );106}

   残り 90 行を表示

4. 最後にsrc/app/page.tsxにTaskListコンポーネントを追加します。

   page.tsxTSX · 9行折り返すコピー（page.tsx）

   1import TaskList from "@/components/TaskList";23export default function Home() {4  return (5    <div>6      <TaskList />7    </div>8  );9}

以下のToDo Listが作成できました。

完成したToDoリストのページキャプチャ

• タスクを追加

  タスクを追加するとフォームの下に入力したタスクが追加されます。

  

  タスクを追加した状態

  Supabaseにもタスクが追加されていることが確認できます。

  

  Supabaseにもタスクが追加されている

• タスクを完了

  タスク名の横のチェックボックスにチェックを入れるとタスクが完了となり、取り消し線が表示されます。

  

  タスクを完了した状態

  Supabaseを見ると対象のタスクのcompletedの値がTRUEになっていることが確認できます。

  

  completedがTRUEになっている

• タスクを削除

  タスク名の右側のDeleteボタンを押すとタスクが削除され、リストから無くなります。

  Supabaseを見ると対象のタスクが削除されていることが確認できます。

• 複数タスクの管理

  最後にタスクを複数追加し、より実際の利用に近い形で検証をおこないます。

  

  複数のタスクを登録したToDoリスト

  Supabaseも念のため確認しておきます。

  

  複数のタスクが登録されている

  一通り確認できたら、これでPrismaとSupabaseを使用したNext.jsのアプリケーション作成が完了になります。

Visual Studio Codeで自動フォーマットをするために、settings.jsonに以下の記述を追加してください。

1{2  "[prisma]": {3    "editor.defaultFormatter": "Prisma.prisma"4  }5}

合わせて以下の拡張機能も追加してください。

Prisma - Visual Studio Marketplace⁠（新しいタブで開く）

• Prisma | Works With Supabase⁠（新しいタブで開く）
• Data modeling in Prisma ORM | Prisma Documentation⁠（新しいタブで開く）
• Prisma Schemaの書き方あれこれ⁠（新しいタブで開く）