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.

Practice

1. What is the main purpose of using form actions with server functions in Next.js App Router?

easy

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

B. To run client-side validation before submitting the form

C. To style the form elements dynamically

D. To handle form submissions securely on the server without client-side JavaScript

Solution

1. Step 1: Understand form actions role

   Form actions in Next.js let you handle form data processing on the server side, improving security and simplicity.

2. Step 2: Compare with client-side logic

   Unlike client-side validation or styling, form actions avoid running JavaScript in the browser for form handling.

3. Final Answer:

   To handle form submissions securely on the server without client-side JavaScript -> Option D

4. Quick Check:

   Form actions = server-side handling [OK]

Hint: Form actions run on server, not client [OK]

Common Mistakes:

• Thinking form actions run client-side
• Confusing form styling with form handling
• Assuming form actions fetch external APIs on client

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

easy

A. export async function action(formData) { /* handle data */ }

B. function action() { return }

C. const action = () => console.log('submit')

D. export default function action() { alert('submitted') }

Solution

1. Step 1: Identify server action syntax

   Server actions are async functions exported to handle form data, receiving formData as parameter.

2. Step 2: Check other options

   Other options either return JSX incorrectly or use client-side code like alert or console.log without async/await.

3. Final Answer:

   export async function action(formData) { /* handle data */ } -> Option A

4. Quick Check:

   Server action = async export function [OK]

Hint: Server actions are async exported functions with formData param [OK]

Common Mistakes:

• Defining action as a React component
• Using alert or console.log inside server action
• Not marking function as async

3. Given this server action function in Next.js, what will be the output after submitting the form?

export async function action(formData) {
  const name = formData.get('name');
  return new Response(`Hello, ${name}!`);
}

medium

A. The page will reload without any message

B. The form data is ignored and no response is sent

C. The server responds with 'Hello, [name]!' where [name] is the input value

D. A syntax error occurs because Response is not allowed

Solution

1. Step 1: Extract form data value

   The function uses formData.get('name') to get the input named 'name'.

2. Step 2: Return a Response with greeting

   The function returns a Response object with a greeting message including the name value.

3. Final Answer:

   The server responds with 'Hello, [name]!' where [name] is the input value -> Option C

4. Quick Check:

   formData.get + Response = greeting message [OK]

Hint: formData.get returns input value used in Response [OK]

Common Mistakes:

• Assuming Response is invalid in server action
• Thinking form data is ignored
• Expecting page reload without message

4. Identify the error in this Next.js server action function:

export async function action(formData) {
  const email = formData.email;
  return new Response(`Email: ${email}`);
}

medium

A. Response object cannot be returned from server actions

B. Using formData.email instead of formData.get('email')

C. Missing async keyword in function declaration

D. Function should not be exported

Solution

1. Step 1: Check how formData is accessed

   formData is a FormData object; to get values, use formData.get('fieldName'), not dot notation.

2. Step 2: Validate other parts

   The function is async and exported correctly; returning Response is allowed in server actions.

3. Final Answer:

   Using formData.email instead of formData.get('email') -> Option B

4. Quick Check:

   Access formData with get() method [OK]

Hint: Use formData.get('field') to access form values [OK]

Common Mistakes:

• Accessing formData fields with dot notation
• Forgetting async keyword
• Thinking Response cannot be returned

5. You want to create a Next.js form that submits user feedback and then redirects to a thank-you page using a server action. Which code snippet correctly implements this behavior?

export async function action(formData) {
  const feedback = formData.get('feedback');
  // Save feedback to database (omitted)
  return redirect('/thank-you');
}

hard

A. This code correctly handles form data and redirects after submission

B. You cannot use redirect in server actions; must return JSON instead

C. The formData.get call should be replaced with formData.feedback

D. Server actions cannot perform side effects like saving data

Solution

1. Step 1: Verify form data retrieval

   The code correctly uses formData.get('feedback') to get the input value.

2. Step 2: Confirm redirect usage

   Next.js server actions support returning redirect() to navigate after processing.

3. Final Answer:

   This code correctly handles form data and redirects after submission -> Option A

4. Quick Check:

   formData.get + redirect() = correct pattern [OK]

Hint: Use redirect() in server action to navigate after submit [OK]

Common Mistakes:

• Thinking redirect() is not allowed in server actions
• Accessing formData with dot notation
• Believing server actions cannot save data or cause side effects