Server action database mutations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server action that adds a new user to the database.

NextJS

export const addUser = async (data) => {
  'use server';
  await prisma.user.create({ data: [1] });
};

Drag options to blanks, or click blank then click option'

Adata

Buser

Cinput

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name instead of the function argument.

Forgetting to pass the data property inside the create method.

The data object contains the user information to be saved. It must be passed to prisma.user.create inside the data property.

2fill in blank

medium

Complete the code to mark the server action as a server-only function.

NextJS

export const deleteUser = async (id) => {
  [1];
  await prisma.user.delete({ where: { id } });
};

Drag options to blanks, or click blank then click option'

A'use client'

B'use strict'

C'use server'

D'use action'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use client' instead, which marks client components.

Omitting the directive entirely.

The directive 'use server' marks the function as a server action in Next.js.

3fill in blank

hard

Fix the error in the server action that updates a user's email.

NextJS

export const updateUserEmail = async (id, email) => {
  'use server';
  await prisma.user.update({
    where: { id },
    data: { email: [1] }
  });
};

Drag options to blanks, or click blank then click option'

Aid

Bemail

CuserEmail

Ddata.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name like id or userEmail.

Trying to access data.email which is undefined here.

The email parameter holds the new email value and should be assigned directly.

4fill in blank

hard

Fill both blanks to create a server action that toggles a user's active status.

NextJS

export const toggleUserActive = async (id, isActive) => {
  'use server';
  await prisma.user.update({
    where: { id: [1] },
    data: { active: [2] }
  });
};

Drag options to blanks, or click blank then click option'

Aid

BisActive

CuserId

DactiveStatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables like userId or activeStatus.

Mixing up the parameters.

The id parameter identifies the user, and isActive is the new active status to set.

5fill in blank

hard

Fill all three blanks to create a server action that creates a post with title and content.

NextJS

export const createPost = async (title, content) => {
  'use server';
  const newPost = await prisma.post.create({
    data: {
      [1]: [2],
      [3]: content
    }
  });
  return newPost;
};

Drag options to blanks, or click blank then click option'

Atitle

Ccontent

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using content as a field name instead of body.

Mixing up keys and values.

The database expects the fields title and body. We assign the title parameter to the title field, and content parameter to the body field.

Practice

1. What is the main purpose of using server actions for database mutations in Next.js?

easy

A. To run client-side animations after data changes

B. To securely update data on the server without exposing logic to the client

C. To fetch data from an external API on the client

D. To style components dynamically based on user input

Solution

1. Step 1: Understand server actions role

   Server actions run on the server and handle data changes securely.

2. Step 2: Identify the security benefit

   They keep mutation logic hidden from the client, preventing misuse.

3. Final Answer:

   To securely update data on the server without exposing logic to the client -> Option B

4. Quick Check:

   Server actions = secure server-side mutations [OK]

Hint: Server actions run on server to keep data safe [OK]

Common Mistakes:

• Thinking server actions run on the client
• Confusing server actions with client-side fetching
• Believing server actions handle UI styling

2. Which of the following is the correct way to declare a server action function in Next.js?

easy

A. export async function addUser() { 'use server'; /* mutation code */ }

B. export async function addUser() { useServer(); /* mutation code */ }

C. export async function addUser() { /* mutation code */ } 'use server';

D. 'use server'; export async function addUser() { /* mutation code */ }

Solution

1. Step 1: Identify correct 'use server' placement

   The 'use server' directive must be the first statement inside the function file or function scope.

2. Step 2: Check syntax correctness

   'use server'; export async function addUser() { /* mutation code */ } places 'use server' at the top before the function, which is correct syntax.

3. Final Answer:

   'use server'; export async function addUser() { /* mutation code */ } -> Option D

4. Quick Check:

   'use server' directive must be at top [OK]

Hint: Put 'use server' at the top before function export [OK]

Common Mistakes:

• Placing 'use server' inside function body after code
• Using a function call like useServer() instead of directive
• Putting 'use server' after function declaration

3. Given this server action code, what will be the result after calling await addUser({ name: 'Alice' }) if the database is empty?

 'use server';
 async function addUser(user) {
   await db.users.create({ data: user });
   return await db.users.count();
 }

medium

A. Returns 1 because one user is added

B. Returns undefined because no return statement

C. Throws an error because 'use server' is misplaced

D. Returns 0 because count is called before creation

Solution

1. Step 1: Analyze database mutation

   The function creates a user in the database with given data.

2. Step 2: Check return value

   After creation, it returns the count of users, which should be 1.

3. Final Answer:

   Returns 1 because one user is added -> Option A

4. Quick Check:

   Created one user, count = 1 [OK]

Hint: Create then count means count reflects new data [OK]

Common Mistakes:

• Assuming count runs before creation completes
• Confusing 'use server' placement causing error
• Missing return statement in function

4. Identify the error in this server action code snippet:

'use server';
export async function updateUser(id, data) {
  await db.users.update({ where: { id }, data });
}

medium

A. Missing semicolon after 'use server' directive

B. Missing export keyword

C. Incorrect object structure in update call

D. No error, code is correct

Solution

1. Step 1: Check 'use server' directive syntax

   The 'use server'; directive is correctly placed at the top of the module.

2. Step 2: Analyze update method parameters

   The update method expects an object with 'where' and 'data' keys, but here 'data' is outside the object, causing syntax error.

3. Final Answer:

   Incorrect object structure in update call -> Option C

4. Quick Check:

   update expects { where: ..., data: ... } object [OK]

Hint: Check object keys carefully in db update calls [OK]

Common Mistakes:

• Assuming missing semicolon causes error
• Forgetting to wrap data inside update object
• Missing export keyword (actually present)

5. You want to create a server action that deletes a user only if they have no active orders. Which approach correctly combines server action and database mutation logic?

 'use server';
 async function deleteUserIfNoOrders(userId) {
   const orders = await db.orders.findMany({ where: { userId, status: 'active' } });
   if (orders.length === 0) {
     await db.users.delete({ where: { id: userId } });
     return 'Deleted';
   }
   return 'Has active orders';
 }

hard

A. This code correctly checks orders before deleting user

B. This code deletes user without checking orders

C. This code will throw error because 'use server' is misplaced

D. This code returns 'Deleted' even if user has active orders

Solution

1. Step 1: Verify order check logic

   The function queries active orders for the user and checks if none exist.

2. Step 2: Confirm conditional deletion

   If no active orders, it deletes the user and returns 'Deleted'; otherwise returns 'Has active orders'.

3. Final Answer:

   This code correctly checks orders before deleting user -> Option A

4. Quick Check:

   Conditional delete based on orders = correct [OK]

Hint: Check conditions before mutation to avoid unwanted deletes [OK]

Common Mistakes:

• Deleting user without checking orders first
• Misplacing 'use server' directive
• Returning wrong message ignoring condition