Need some help with handling onSubmit within Forms (Prisma, Nextjs, shadcn ui)

[jlorezz]

Hey guys, so how would you handle onSubmit within the forms?

Context: Once the user fills out the form for creating the user i need it to send this to prisma and create the user in the db. Once this happends i either show a success or destructive toast based on if there was an error or not?

Nexjts router only works in client components but having the prisma logic doesn't? Do i need to make a pages/api/endpoint for this or how would you approach it?

  async function onSubmit(data: DrivingStudentsFormValues) {
    try {
      const res = await createDrivingStudent(data)
      if (res.user) {
        router.push("/driving-students")
        toast({
          title: "Fahrschüler erfolgreich hinzugefügt.",
          description: "Der Fahrschüler wurde erfolgreich hinzugefügt.",
        })
      }
    } catch (error) {
      console.log(error)
      toast({
        title: "Fahrschüler konnte nicht hinzugefügt werden.",
        description: "Der Fahrschüler konnte nicht hinzugefügt werden.",
        variant: "destructive",
      })
    }
  }

export async function createDrivingStudent(user: any) {
try {
  const userFromDB = await prisma.user.create({
    data: {
      ...user,
      role: UserRole.STUDENT,
    },
  })
  return { user: userFromDB }
} catch (error) {
  return { error }
}
}

[takeshikriang]

You can create a function with use server to call Prisma, then import it to your use client component.

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#with-client-components

However, this is an experimental feature. You need to enable it in your next.config.js
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#convention