Form actions with server functions in NextJS - Step-by-Step Execution

Concept Flow - Form actions with server functions

User fills form

↓

User submits form

↓

Form data sent to server function

↓

Server function processes data

↓

Server sends response

↓

Client updates UI based on response

This flow shows how a form submission triggers a server function that processes data and sends back a response to update the UI.

Execution Sample

NextJS

export default function Page() {
  async function handleSubmit(formData) {
    'use server'
    console.log('Received:', formData.get('name'))
  }
  return (
    <form action={handleSubmit}>
      <input name="name" />
      <button type="submit">Send</button>
    </form>
  )
}

A Next.js form uses a server function as its action to handle submission and log the input value.

Execution Table

Step	Action	Form Data	Server Function Called	Console Output	UI Update
1	User types 'Alice' in input	name=Alice	No		Input shows 'Alice'
2	User clicks submit button	name=Alice	Yes	Received: Alice	Form submits, page may refresh or update
3	Server function logs data	name=Alice	Yes	Received: Alice	Server processes data
4	Server sends response	name=Alice	Yes		UI updates based on response
5	Form submission ends		No		Ready for next input

💡 Form submission completes after server function processes data and UI updates.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
formData	empty	name=Alice	name=Alice	name=Alice	cleared or unchanged
serverFunctionCalled	false	false	true	true	false after completion

Key Moments - 3 Insights

Why does the server function run only after form submission?

Because the server function is assigned as the form's action, it triggers only when the user submits the form, as shown in execution_table step 2.

How does the form data reach the server function?

The form data is automatically collected and passed as a FormData object to the server function when the form submits, visible in execution_table step 2 and 3.

Does the UI update immediately after submission?

The UI updates after the server sends a response, which may cause a page refresh or partial update, as shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the server function called?

A Step 5

B Step 1

C Step 2

D Step 4

💡 Hint

Check the 'Server Function Called' column in the execution_table.

According to the variable tracker, what is the value of formData after step 3?

A name=Alice

B cleared

C empty

D undefined

💡 Hint

Look at the 'formData' row in variable_tracker after step 3.

If the user changes the input to 'Bob' before submitting, what changes in the execution table?

A Server function is not called

B Console Output changes to 'Received: Bob'

C UI does not update

D Form data remains 'name=Alice'

💡 Hint

Refer to the 'Console Output' column in execution_table step 3.

Concept Snapshot

Next.js form actions use server functions to handle submissions.
Assign the server function to the form's action attribute.
Form data is passed as FormData to the server function.
Server processes data and can update UI or redirect.
This enables server-side logic without client JS handlers.

Full Transcript

This visual execution shows how a Next.js form uses a server function as its action. The user types a name, submits the form, which triggers the server function. The server function receives the form data as a FormData object and logs the input value. After processing, the server sends a response that updates the UI or refreshes the page. Variables like formData and serverFunctionCalled change state during these steps. Key moments clarify when the server function runs and how data flows. Quiz questions test understanding of these steps.