【Next.js × Supabase × Prisma】ニックネーム付きユーザー登録を実装する方法

Lernovaアプリでは、ユーザー登録時にメールアドレスとパスワードだけでなく、ニックネームを一緒に保存する仕組みを導入しています。

この実装は、Supabase Authで認証し、Prisma経由で独自のUserテーブルにニックネームを保存する構成です。

本記事では、その流れとポイントをまとめます。

🎯 ゴール

• Supabaseのauth.signUp()でメールアドレスとパスワードを登録

• Supabaseのuser ID（UUID）を使って、Prisma経由でUserテーブルにニックネームを保存

🔧 技術スタック

• Next.js (App Router構成)

• Supabase（Auth機能）

• Prisma（独自DBへのアクセス）

• React Hook Form（フォーム制御

📦 User テーブルの設計（Prisma）

model User {
  id              String   @id @default(uuid())
  supabaseUserId  String   @unique
  email           String   @unique
  nickname        String
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
}

📄 サインアップコードの要点（Next.js App Router）

const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
  email,
  password,
  options: {
    emailRedirectTo: "http://localhost:3000/",
  },
});

if (!signUpError && signUpData.user) {
  const response = await fetch("/api/user", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      email,
      nickname,
      supabaseUserId: signUpData.user.id,
    }),
  });

  if (response.ok) {
    alert("確認メールを送信しました。メールを確認してください。");
  }
}

📡 API ルート側 /api/user（例）

import { prisma } from "@/lib/prisma";

export async function POST(req: Request) {
  const { email, nickname, supabaseUserId } = await req.json();

  const user = await prisma.user.create({
    data: {
      email,
      nickname,
      supabaseUserId,
    },
  });

  return Response.json({ user });
}

✅ 実装のポイント

• SupabaseのAuthと自前のユーザーデータを分離して管理することで、拡張しやすい構造に。

• supabaseUserIdをキーにして各種情報（プロフィール、学習記録など）と連携可能。

• サインアップ成功後にAPI経由でニックネームを保存するため、一貫性を保ちつつ非同期処理を分離しているのが特徴。

📝 まとめ

Supabase Authでの認証と、Prismaを使った独自テーブルでのユーザー管理を組み合わせることで、柔軟かつ拡張性の高いユーザー管理が実現できます。

ニックネームだけでなく、後々プロフィール画像や学習属性などを追加する際にも、この構成が役立ちます。