Creating Tasks with Server-side Actions in Next.js

Introduction

The article starts by clearing the existing tasks from the Prisma Studio to begin with a clean slate.

Form Creation

We'll structure the form using HTML elements:

Server-side Action

A server-side action is a function that handles form submissions on the server:

This function must be asynchronous (async) and use the useServer directive at the beginning.

The function receives the form data as a parameter.

To access the value of the input field, we use formData.get('content').

The article emphasizes that the useServer directive is necessary.

Server-side Logic

The server-side action logs the retrieved content value to the terminal for verification.

We use Prisma to interact with the database.

The task is created in the database using await Prisma.task.create({ content }).

Gotcha and Solution

The initial attempt to create a task might not reflect in the browser because the task page is static.

To update the page with the latest data, we need to use Next.js's revalidate function.

Conclusion

The article demonstrates how to create a basic form with server-side actions in Next.js. It highlights key concepts like using useServer, accessing form data, and interacting with Prisma for data persistence. The concept of revalidation for dynamic updates is also introduced.