Testing server actions in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a server action updates state in Next.js 14?

Consider a Next.js 14 component using a server action to update a counter. What will the displayed counter value be after clicking the button once?

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  async function increment() {
    'use server';
    setCount(count + 1);
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </>
  );
}

A The code throws a runtime error because setCount cannot be called inside a server action.

B The count increases by 1 and displays the updated value immediately.

C The count stays at 0 because server actions cannot directly update client state.

D The count increases but only after a full page reload.

💡 Hint

Remember that server actions run on the server and cannot directly update client state hooks.

Server actions run on the server and cannot directly modify client-side React state like useState. The setCount call inside the server action does nothing on the client. To update client state, you must handle the update on the client or refresh the data after the server action completes.

📝 Syntax

intermediate

Which option correctly defines a server action in Next.js 14?

Identify the correct syntax to define a server action function in Next.js 14.

A function saveData() { 'use server'; /* logic */ }

B function saveData() { 'use client'; /* logic */ }

C async function saveData() { 'use client'; /* logic */ }

D async function saveData() { 'use server'; /* logic */ }

💡 Hint

Server actions must be async and include the 'use server' directive.

Server actions in Next.js 14 must be async functions and include the 'use server' directive at the top of the function body. This tells Next.js to run the function on the server.

🔧 Debug

advanced

Why does this server action cause a hydration mismatch error?

Given this Next.js 14 component with a server action, why does the browser console show a hydration mismatch error?

NextJS

import { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);

  async function toggle() {
    'use server';
    setOn(!on);
  }

  return (
    <>
      <p>{on ? 'ON' : 'OFF'}</p>
      <button onClick={toggle}>Toggle</button>
    </>
  );
}

A Because the server action tries to update client state, causing mismatch between server and client HTML.

B Because the button's onClick handler is not async, causing event issues.

C Because useState cannot be used inside Next.js components.

D Because the component is missing a key prop on the button element.

💡 Hint

Think about how server actions and client state interact during rendering.

The server action runs on the server and cannot update client state directly. Calling setOn inside the server action does not update the client state, so the server-rendered HTML and client-rendered HTML differ, causing a hydration mismatch error.

❓ state_output

advanced

What is the value of count after this server action completes?

In this Next.js 14 component, what will be the value of count after clicking the button once?

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  async function increment() {
    'use server';
    // pretend to save to database
    return count + 1;
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={async () => {
        const newCount = await increment();
        setCount(newCount);
      }}>Increment</button>
    </>
  );
}

A 1

B 0

C NaN

D undefined

💡 Hint

Note how the server action returns a value and the client updates state with it.

The server action returns count + 1 which is 1 initially. The client awaits this value and then calls setCount(1), so the displayed count updates to 1.

🧠 Conceptual

expert

Which statement about Next.js 14 server actions is TRUE?

Select the true statement about server actions in Next.js 14.

A Server actions can directly modify client React state hooks like useState.

B Server actions run on the server and can be called from client components to perform server-side logic.

C Server actions must be synchronous functions without async/await.

D Server actions automatically update client UI without any client-side state management.

💡 Hint

Think about where server actions run and how they interact with client components.

Server actions run on the server and can be called from client components to perform server-side logic like database updates. They cannot directly modify client React state hooks, must be async, and do not automatically update client UI without client-side state management.