Form actions with server functions in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a form action in Next.js when using server functions?

A form action is a server function that handles form submissions directly on the server, allowing you to process data without client-side JavaScript.

beginner

How do you define a server function to handle a form action in Next.js?

You export an async function named action inside your component file. This function receives the form data and runs on the server when the form is submitted.

intermediate

Why use server functions for form actions instead of client-side handlers?

Server functions keep sensitive logic and data processing on the server, improving security and reducing client-side complexity.

beginner

What HTML attribute connects a form to a server function in Next.js?

The action attribute on the <form> element points to the server function that will handle the submission.

intermediate

How does Next.js handle form submission with server functions without a page reload?

Next.js uses progressive enhancement and server actions to handle form submissions asynchronously, so the page can update without a full reload.

In Next.js, where do you define the server function to handle a form action?

A In the global CSS file

B In a separate client-side JavaScript file

C Inside the same file as the form component

D In the public folder

Server functions for form actions are defined in the same file as the form component to keep logic close and run on the server.

What keyword is used to export a server function for form actions in Next.js?

A export async function action()

B export default function handleForm()

C export function clientAction()

D export const formHandler = () => {}

The server function must be named action and exported as an async function to handle form submissions.

Which HTML element attribute specifies the server function to handle form submission?

A action

B method

C onSubmit

D name

The action attribute on the <form> element points to the server function URL or handler.

What is a key benefit of using server functions for form actions in Next.js?

A Runs all code on the client

B Improves security by processing data on the server

C Requires no HTML form tags

D Disables form validation

Server functions keep sensitive processing on the server, improving security and reducing client exposure.

How does Next.js handle form submissions with server functions to avoid full page reloads?

A By using client-side JavaScript only

B By disabling the form submit button

C By redirecting to a new page

D By using server actions with progressive enhancement

Next.js uses server actions and progressive enhancement to handle form submissions smoothly without full reloads.

Explain how to create and use a server function as a form action in Next.js.

Think about how the form and server function connect and where the function runs.

Describe the benefits of handling form submissions with server functions in Next.js compared to client-side handlers.

Consider security and user experience improvements.

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