Form actions with server functions in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Next.js form is submitted?

Consider this Next.js server component with a form using a server action. What will the user see after submitting the form?

NextJS

import { useState } from 'react';

export default function ContactForm() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    return `Hello, ${name}! Your message was received.`;
  }

  return (
    <form action={handleSubmit}>
      <input name="name" type="text" required aria-label="Name" />
      <button type="submit">Send</button>
    </form>
  );
}

A The form submits without page reload, and the greeting message appears below the form automatically.

B Nothing happens because the form action is missing a preventDefault call.

C The form submission causes a client-side error because server actions cannot return strings.

D The page reloads and displays the greeting message returned by the server action.

💡 Hint

Think about how Next.js server actions handle form submissions and page updates.

In Next.js, a form with a server action submits and reloads the page. The returned string from the server action replaces the page content, so the user sees the greeting message.

📝 Syntax

intermediate

Which option correctly defines a Next.js server action for a form?

Identify the correct syntax for a server action function used as a form action in Next.js.

A function submitData(formData) { const email = formData.get('email'); 'use server'; }

B async function submitData(formData) { 'use server'; const email = formData.get('email'); }

C async function submitData(formData) { const email = formData.get('email'); }

D async function submitData(formData) { 'use client'; const email = formData.get('email'); }

💡 Hint

The server action must be async and include the 'use server' directive at the top.

Server actions in Next.js require the 'use server' directive at the start of the async function to mark it as a server action.

❓ state_output

advanced

What is the value of 'count' after submitting this form twice?

Given this Next.js server component with a form and a server action that increments a count, what is the value of count after submitting the form twice?

NextJS

import { useState } from 'react';

let count = 0;

export default function CounterForm() {
  async function increment(formData) {
    'use server';
    count += 1;
    return count;
  }

  return (
    <form action={increment}>
      <button type="submit">Increment</button>
    </form>
  );
}

A 2

B The code throws an error because 'count' cannot be updated in a server action.

C 1

D 0

💡 Hint

Consider how server components and server actions handle state and variables.

Each server action runs in a fresh environment without preserving module-level variables. So 'count' resets to 0 each time, increments to 1, and returns 1 on every submission.

🔧 Debug

advanced

Why does this Next.js form action cause a runtime error?

Examine this server action used as a form action. Why does submitting the form cause a runtime error?

NextJS

export default function Form() {
  async function saveData(formData) {
    'use server';
    const age = formData.get('age');
    if (age > 18) {
      return 'Adult';
    } else {
      return 'Minor';
    }
  }

  return (
    <form action={saveData}>
      <input name="age" type="number" aria-label="Age" />
      <button type="submit">Check</button>
    </form>
  );
}

A Because formData.get('age') returns a string, comparing it with number 18 causes a runtime error.

B Because the 'use server' directive is missing a semicolon, causing a syntax error.

C Because the form is missing method="post", causing the action to fail.

D Because the function is not marked async, causing a promise error.

💡 Hint

Think about the data type returned by formData.get and how JavaScript compares different types.

formData.get returns a string. Comparing a string to a number with '>' causes unexpected behavior or runtime errors. The age should be converted to a number first.

🧠 Conceptual

expert

Which statement about Next.js form actions with server functions is TRUE?

Choose the correct statement about how Next.js handles form actions with server functions.

A Server actions run on the server and cause a full page reload by default after form submission.

B Server actions can directly modify client component state variables without hooks.

C Server actions run on the client and update component state without page reload.

D Server actions require explicit client-side JavaScript to handle form submission events.

💡 Hint

Recall where server actions execute and how form submissions behave in Next.js.

Server actions run on the server. When used as form actions, they cause a full page reload by default to show the updated content.