サンプル

管理者の登録画面からデータを入力します。

登録が成功するとPostgreSQLにデータが反映されます。

登録済み管理者の場合は、下記のようにサーバ側からメッセージを返却します。

アラートにて登録済みの管理者を表示する仕様です。

スキーマモデル

管理者情報としてAdminUserモデルを追加しました。

schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

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

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

model User{
  userId Int @id @default(autoincrement())
  userName String
  email String @unique
  password String
  createdAt DateTime @default(now())

  orders   Order[]  // 1人のユーザーは複数の注文を持つ
}

model AdminUser{
  adminUserId Int @id @default(autoincrement())
  adminUserName String
  adminEmail String @unique
  adminPassword String
  createdAt DateTime @default(now())
}

model Product{
  productId Int @id @default(autoincrement())
  productName String
  description String
  productImagepath String
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  items   Item[]   // 1つの製品は複数のアイテムに関連付けられる
}

model Item{
  itemId Int @id @default(autoincrement())
  quantity Int
  price Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  orderId   Int      // Order と 1対多 のリレーション
  order     Order    @relation(fields: [orderId], references: [orderId])
  productId Int      // Product と 多対1 のリレーション
  product   Product  @relation(fields: [productId], references: [productId])
}

model Order{
  orderId Int @id @default(autoincrement())
  total Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  userId    Int      // User と 1対多 のリレーション
  user      User     @relation(fields: [userId], references: [userId])
  items     Item[]   // 1つの注文には複数のアイテムが関連付けられる
}

ディレクトリ構成

NextProject
├─ app
│  ├─ admin
│  │  ├─ userRegister
│  │  │  └─ page.tsx
│  │  └─ adminUserRegister
│  │     └─ page.tsx
│  ├─ api
│  │  ├─ adminUserRegister
│  │  │  └─ route.ts
│  │  └─ userRegister
│  │        └─ route.ts
│  ├─ components
│  │  └─ headers
│  │        └─ navbar
│  │           └─ page.tsx
│  └─ prisma
│     └─ schema.prisma
├─ next.config.ts
├─ package.json
├─ package.lock.json
└─ tailwind.config.mjs

フロント側のコード

app/admin/adminUserRegister/page.tsx

'use client'
import { useForm } from "react-hook-form"
import { useState } from "react";

//付与すること

export default function AdminRegister(){
    //初期値ｱを設定
    const defaultValues = {
        userName:'管理者太郎',
        email:'authenticater@email.com',
        password:''
    }

    //フォームを初期化する
    const {register,handleSubmit,formState:{errors}} = useForm({
        defaultValues
    });

    const [userName,setUserName] = useState("");
    const [email,setEmail] = useState("");
    const [password,setPassword] = useState("");
    
    //フォーム送信時の実行される関数
    const onSubmit = async(data:any)=>{
        //POSTリクエスト送信
        const response = await fetch('/api/adminUserRegister',{
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                cache:'no-store'
            },
            body:JSON.stringify({
                userName:data.userName,
                email:data.email,
                password:data.password
            })
        });
        //レスポンスデータをJSON変換する
        const returnResponse = await response.json();
        console.log(returnResponse);

        //レスポンスを画面に表示する
        if(response.ok){
            alert('管理者ユーザ登録成功しました');
        }

        if(returnResponse.status === 500){
            alert(returnResponse.existAdminUser.adminUserName + "は、すでに塘路kされています");
        }
    }

    return(
        <div className="flex items-center justify-center min-h-screen rounded-md">
            <form onSubmit={handleSubmit(onSubmit)} className="shadow-md w-96 px-8 py-8 border border-gray-300 rounded-md">
                <div className="w-full">
                    <label className="font-bold">管理者名</label>
                    <input
                        type="text"
                        name="userName"
                        defaultValue={userName}
                        className="block rounded-md w-full text-sm border border-gray-300 text-gray-900 px-2 py-2"
                        placeholder=""
                        {...register('userName',{
                          required:'管理者名は必須です。',
                          maxLength:{
                            value:20,
                            message:'管理者名は20文字以内にしてください。'
                          }  
                        })}
                        onChange={(e)=>setUserName(e.target.value)}
                    />
                    <div className="text-red-500">{errors.userName?.message}</div>
                </div>
                <div className="w-full mt-4">
                    <label className="font-bold">管理者メールアドレス</label>
                    <input
                        type="email"
                        name="email"
                        defaultValue={email}
                        className="block rounded-md w-full text-sm border border-gray-300 text-gray-900 px-2 py-2"                        
                        {...register('email',{
                            required:'管理者メールアドレスは必須です。',
                            pattern:{
                                value:/([a-z\d+\-.]@[a-z\d-]+(?:\.[a-z]+)*)/i,
                                message:'管理写メールアドレスが必須です。'
                            }
                        })}
                        onChange={(e)=>setEmail(e.target.value)}
                    />
                </div>
                <div className="w-full mt-4">
                    <label className="font-bold">管理者パスワード</label>
                    <input
                        type="password"
                        name="password"
                        defaultValue={password}
                        className="block rounded-md w-full text-sm border border-gray-300 text-gray-900 px-2 py-2"
                        {...register('password',{
                            required:'管理者パスワードは必須です。'
                        })}
                        onChange={(e)=>{e.target.value}}
                    />
                </div>
                <div className="flex items-center justify-center mt-4 mb-4">
                    <button type="submit" className="shadow-md bg-blue-500 text-white font-bold rounded-md px-4 py-4">
                        登録
                    </button>
                </div>
            </form>
        </div>
    )
}

サーバ側のコード

app/api/adminUserRegister/route.ts

import { NextRequest,NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";
import bcrypt from 'bcryptjs'

const prisma = new PrismaClient();

export async function POST(req:NextRequest){
    try{
        let {userName,email,password} = await req.json();
        console.log("受け取った管理者名は," + userName);
        const hashedPassword:String = await bcrypt.hash(password,10);
        
        //リクエストパラメータが不足している場合はエラーレスポンスを変化ykする
        if(!userName || !email || !password){
            return NextResponse.json({error:"全ての項目を入力してください",status:401});
        }

        //登録済みユーザの確認
        const existAdminUser = await prisma.AdminUser.findUnique({
            where:{
                adminEmail: email
            }
        });

        if(existAdminUser){
            return NextResponse.json({message:"すでにこのユーザーは登録されています。",status:500,existAdminUser:existAdminUser},{status:500});
        }

        //管理ユーザを登録する
        const newAdminUser = await prisma.AdminUser.create({
            data:{
                adminUserName: userName,
                adminEmail: email,
                adminPassword: hashedPassword
            }
        });

        //成功レスポンセ鵜を変化yk数ル
        return NextResponse.json({message:'管理者ユーザーを登録しました。',adminUser:newAdminUser});

    }catch(error){
        if(error instanceof Error){
            console.log("エラー詳細：",error);
        }
        return NextResponse.json({error:"ユーザー登録中にエラーが発生しました。",status:500});
    }
}

以上です。