Next.js & Server Actions: A Beginner’s Guide to Data Mutations

Written by

learnmodernwebdevelopment

in

In the ever-evolving landscape of web development, the need for efficient and user-friendly data handling is paramount. As developers, we constantly strive to create applications that not only look great but also respond quickly to user interactions. One of the critical aspects of building such applications is managing data mutations – the processes of creating, reading, updating, and deleting data (CRUD operations). Next.js, a powerful React framework, provides several tools to achieve this, and one of the most exciting recent additions is Server Actions. This guide will delve into Server Actions, explaining their significance and how you can leverage them to build more interactive and performant Next.js applications.

What are Server Actions?

Server Actions are asynchronous functions that run on the server. They allow you to write server-side code directly within your React components, streamlining the process of handling data mutations. Before Server Actions, developers often had to create separate API routes or use libraries like `swr` or `react-query` to manage data fetching and mutations. Server Actions simplify this by enabling you to perform server-side operations directly within your components.

Server Actions offer several advantages:

  • Simplified Code: They reduce the boilerplate code needed for data mutations.
  • Improved Performance: Server-side execution can be faster and more secure.
  • Enhanced Security: Data mutations can be handled securely on the server, protecting sensitive information.
  • Better Developer Experience: They integrate seamlessly with React and Next.js features.

Setting Up Your Next.js Project

Before diving into Server Actions, you’ll need a Next.js project. If you don’t have one, you can create a new project using the following command in your terminal:

npx create-next-app@latest my-server-actions-app
cd my-server-actions-app

This command creates a new Next.js project named `my-server-actions-app`. Navigate to the project directory using `cd my-server-actions-app`.

Creating Your First Server Action

Let’s create a simple Server Action to update some data. For this example, we’ll simulate a simple to-do list application. First, create a new file named `actions.js` in the `app` directory. This is where we’ll define our Server Actions.

Inside `app/actions.js`, add the following code:

'use server';

export async function addTodo(prevState, formData) {
  const newTodo = {
    id: Date.now(),
    text: formData.get('todoText'),
    completed: false,
  };

  // Simulate saving to a database (replace with your actual database logic)
  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate network latency
  console.log('Adding todo:', newTodo);

  return {
    message: 'Todo added successfully!',
    todos: [newTodo],
  };
}

Let’s break down this code:

  • `’use server’;`: This directive tells Next.js that this file contains server-side code.
  • `addTodo`: This is our Server Action function. It’s an `async` function, meaning it can handle asynchronous operations.
  • `prevState`: This parameter is optional and represents the previous state of the component. It’s useful for handling errors or displaying messages.
  • `formData`: This parameter contains the form data submitted by the user.
  • Inside the function, we create a new to-do item with a unique ID, text, and initial completion status.
  • `await new Promise((resolve) => setTimeout(resolve, 1000));`: This line simulates saving the data to a database. In a real application, you would replace this with your database interaction logic.
  • Finally, the function returns a success message and an array containing the new todo object.

Using the Server Action in a Component

Now, let’s create a component that uses this Server Action. Create a new file named `app/page.js` and add the following code:

'use client';

import { useFormState } from 'react-dom';
import { addTodo } from './actions';

export default function Home() {
  const [state, dispatch] = useFormState(addTodo, { message: null, todos: [] });

  return (
    <div>
      <h2>To-Do List</h2>
      {state.message && <p>{state.message}</p>}
      <form action={dispatch}>
        <label htmlFor="todoText">Add a todo:</label>
        <input type="text" id="todoText" name="todoText" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {state.todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Here’s what’s happening in this component:

  • `’use client’;`: This directive tells Next.js that this is a client-side component.
  • `useFormState`: This React hook is used to manage the form state and trigger the Server Action.
  • `addTodo`: We import the Server Action we defined earlier.
  • `state`: This variable holds the state returned by the Server Action (message and todos).
  • `dispatch`: This function is used to trigger the Server Action when the form is submitted.
  • `<form action={dispatch}>`: The `action` prop of the form is set to the `dispatch` function. When the form is submitted, `dispatch` will call our `addTodo` Server Action.
  • We render a form with an input field for the todo text and a button to submit the form.
  • We display a list of todos based on the `todos` array in the state.

Running the Application

To run your application, open your terminal, navigate to your project directory, and run the following command:

npm run dev

This will start the development server. Open your browser and go to `http://localhost:3000`. You should see the to-do list form. Type in a to-do item and click the

More posts