Why server actions simplify mutations in NextJS - See It in Action

Why Server Actions Simplify Mutations in Next.js

📖 Scenario: You are building a simple Next.js app where users can add items to a list. Normally, updating data on the server requires complex client-server communication. Server actions in Next.js make this easier by letting you write server-side code that runs directly from your components.

🎯 Goal: Build a Next.js component that uses a server action to add a new item to a list. This will show how server actions simplify data mutations by handling server logic seamlessly.

📋 What You'll Learn

Create a list of items as initial data

Add a server action function to handle adding new items

Use a form to submit new items and update the list

Render the updated list after adding items

💡 Why This Matters

🌍 Real World

Server actions let developers write server-side code directly linked to UI events, simplifying data updates in web apps.

💼 Career

Understanding server actions is important for modern Next.js development, improving productivity and code clarity in full-stack projects.

1

Set up initial items list

Create a constant called items with an array containing these strings exactly: 'Apple', 'Banana', 'Cherry'.

NextJS

# Your code here

Need a hint?

Use const items = ['Apple', 'Banana', 'Cherry']; to create the list.

2

Create a server action to add items

Add an async server action function called addItem that takes a formData parameter, extracts the new item with formData.get('newItem'), and pushes it to the items array.

NextJS

const items = ['Apple', 'Banana', 'Cherry'];

// Your code here

Need a hint?

Define addItem as export async function addItem(formData) { const newItem = formData.get('newItem'); items.push(newItem); }.

3

Add a form to submit new items

Create a React functional component called ItemList that renders a form with an input named newItem and a submit button. Use the addItem server action as the form's action handler.

NextJS

const items = ['Apple', 'Banana', 'Cherry'];

export async function addItem(formData) {
  const newItem = formData.get('newItem');
  items.push(newItem);
}

// Your code here

Need a hint?

Create ItemList with a form that uses addItem as the action and includes an input named newItem.

4

Render the updated items list

Inside the ItemList component, below the form, add a <ul> that maps over the items array and renders each item inside a <li> with a unique key.

NextJS

const items = ['Apple', 'Banana', 'Cherry'];

export async function addItem(formData) {
  const newItem = formData.get('newItem');
  items.push(newItem);
}

export default function ItemList() {
  return (
    
      
        
        Add Item
      
      {/* Your code here to render the list */}
    
  );
}

Need a hint?

Use items.map((item, index) => <li key={index}>{item}</li>) inside a <ul>.