Form actions with server functions in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server action function for form submission.

NextJS

'use server';

export async function [1](formData) {
  const name = formData.get('name');
  // process name
}

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

AsubmitForm

BhandleSubmit

Caction

DsendData

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side event handler names like 'handleSubmit' instead of 'action'.

Naming the function something unrelated to server actions.

In Next.js form actions, the server function handling the form is often named 'action' to be recognized as a server action.

2fill in blank

medium

Complete the form tag to use the server action function for submission.

NextJS

<form action=[1]>
  <input name="email" type="email" required />
  <button type="submit">Send</button>
</form>

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

Aaction

BhandleSubmit

CsubmitForm

DsendData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a client-side function name in the form action attribute.

Forgetting to wrap the function in curly braces.

The form's action attribute should be set to the server action function named 'action' to handle submission.

3fill in blank

hard

Fix the error in the server action function to correctly read form data.

NextJS

'use server';

export async function action(formData) {
  const email = formData.[1]('email');
  // process email
}

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

Aget

Bvalue

Cfetch

Dread

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' or 'read' which are not FormData methods.

Trying to access formData like an object property.

FormData objects use the 'get' method to retrieve the value of a named field.

4fill in blank

hard

Fill both blanks to create a server action that logs and returns the submitted username.

NextJS

'use server';

export async function [1](formData) {
  const username = formData.[2]('username');
  console.log(username);
  return username;
}

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

Aaction

Bget

ChandleSubmit

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names or FormData methods.

Forgetting the 'use server' directive.

The server action function is named 'action' and uses 'get' to retrieve form data values.

5fill in blank

hard

Fill all three blanks to create a form with a server action that prevents default and processes the input.

NextJS

'use server';

export async function [1](formData) {
  const message = formData.[2]('message');
  console.log(message);
}

export default function ContactForm() {
  return (
    <form action=[3]>
      <textarea name="message" required></textarea>
      <button type="submit">Send</button>
    </form>
  );
}

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

Aaction

Bget

DhandleSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching function names between server action and form action.

Using incorrect FormData methods.

The server action function is named 'action', uses 'get' to read form data, and the form's action attribute references 'action'.