I want to display nice UI message when some user try to register with already registered email.
This is my route.tsx (/api/auth/register/route.tsx)

import { NextResponse } from "next/server";

import prisma from "@/app/libs/prismadb";
import { hash } from "bcrypt";

export async function POST(request: Request){

    try {
        const {firstName, lastName, email, password} = await request.json();

        console.log({firstName, lastName, email, password});

        const userExist = await prisma.user.findFirst({
            where: {
                email: email
            }
        })

        if(userExist){
            //throw new Error("User with this email already exist");
            return NextResponse.json({ message: "User with this email already exist" }, { status: 400 })
        }

        const hasPass = await hash(password, 12);

        const user = await prisma.user.create({
            data: {
                firstName: firstName,
                lastName: lastName,
                email: email,
                username: email,
                hashedPassword: hasPass
            }
        })

        return NextResponse.json({message: "success"});
        
        
    } catch (error) {

        console.log({error});

        
        
    }

    
}

This is my Form component form.tsx (app/register/form.tsx)

"use client"
import React, { FormEvent } from 'react'

const Form = () => {

    async function handleSubmit(e: FormEvent<HTMLFormElement>) {

        e.preventDefault();

        const formData = new FormData(e.currentTarget);


        try {
            const response = await fetch("api/auth/register", {
                method: "POST",
                body: JSON.stringify({
                    firstName: formData.get('firstName'),
                    lastName: formData.get('lastName'),
                    email: formData.get('email'),
                    password: formData.get('password'),
                })
            })

            if (!response.ok) {
                throw new Error("OOOOOOOPSS");
                
            }
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <form onSubmit={handleSubmit} className='w-full flex flex-col gap-5'>
            <input className=' border-black bg-slate-300' type="text" name="firstName" id="firstName" placeholder='John' />
            <input className=' border-black bg-slate-300' type="text" name="lastName" id="lastName" placeholder='Wick' />
            <input className=' border-black bg-slate-300' type="email" name="email" id="email" placeholder='Email' />
            <input className='border-black bg-slate-300' type="password" name="password" id="password" placeholder='Password' />
            <button className=' bg-red-300' type="submit">Register</button>
        </form>
    )
}

export default Form

And this is my page.tsx (app/register/page.tsx)

import Form from './form'

const page = () => {

    

    return (
        <div className='w-[300px] min-h-[400px] mx-auto mt-10'>
            <Form />
        </div>
    )
}

export default page

Initially I was throwing an error in api route file. After that I decided just to return response with message but i could’t get the message from the response in my component form file. I just want to know what is the proper way to show for example a simple alert message to the user with a message that this email is already registered