CRUD operations with Prisma in NextJS - Step-by-Step Execution

Concept Flow - CRUD operations with Prisma

Start

↓

Create

→Read

↓

End

This flow shows the four main database actions: create new data, read existing data, update data, and delete data, done step-by-step.

Execution Sample

NextJS

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function main() {
  const user = await prisma.user.create({ data: { name: 'Ana' } });
  console.log(user);
}

main()
  .catch(e => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  });

This code creates a new user named Ana in the database and prints the created user.

Execution Table

Step	Action	Prisma Method	Input Data	Result	Next Step
1	Start main function	-	-	No data yet	Create user
2	Create user	prisma.user.create	{ data: { name: 'Ana' } }	User object with id and name 'Ana'	Read user
3	Read user	prisma.user.findUnique	{ where: { id: user.id } }	User object with id and name 'Ana'	Update user
4	Update user	prisma.user.update	{ where: { id: user.id }, data: { name: 'Anna' } }	User object with updated name 'Anna'	Delete user
5	Delete user	prisma.user.delete	{ where: { id: user.id } }	Deleted user object	End
6	End main function	-	-	All CRUD operations done	Stop

💡 All CRUD operations completed successfully, main function ends.

Variable Tracker

Variable	Start	After Create	After Read	After Update	After Delete	Final
user	undefined	{ id: 1, name: 'Ana' }	{ id: 1, name: 'Ana' }	{ id: 1, name: 'Anna' }	{ id: 1, name: 'Anna' } (deleted)	undefined

Key Moments - 2 Insights

Why does the user variable change after each operation?

Each Prisma method returns the current state of the user after that operation, so the user variable updates to reflect the latest data as shown in execution_table rows 2, 3, 4, and 5.

What happens if we try to read the user after deletion?

After deletion (row 5), the user no longer exists in the database, so reading it would return null or error. This is why the flow ends after delete in row 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the user name after the update step?

A Ana

B An

C Anna

D User deleted

💡 Hint

Check the 'Result' column at Step 4 in the execution_table.

At which step does the user get deleted?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look for the 'Delete user' action in the execution_table.

If we skip the update step, what will be the user name after the read step?

A Ana

B Anna

C undefined

D User deleted

💡 Hint

Refer to the 'Result' column at Step 3 in the execution_table.

Concept Snapshot

CRUD with Prisma in Next.js:
- Create: prisma.model.create({ data }) adds new data.
- Read: prisma.model.findUnique/findMany fetches data.
- Update: prisma.model.update({ where, data }) changes data.
- Delete: prisma.model.delete({ where }) removes data.
Each method returns the current state after operation.

Full Transcript

This visual execution shows how to perform CRUD operations using Prisma in a Next.js app. We start by creating a user named Ana. The create method returns the new user object with an id. Next, we read the user by id, confirming the data exists. Then we update the user's name to Anna, and the update method returns the updated user. Finally, we delete the user, and the delete method returns the deleted user object. The variable 'user' updates after each step to reflect the current data state. The flow ends after deletion because the user no longer exists. This step-by-step trace helps beginners see how Prisma methods work and how data changes after each operation.