I explored Server Actions in Next.js 14 using Nextâs App Router and React Server Components (RSC). This comprehensive tutorial shows how to use Server Actions to create, read, update, and delete (CRUD) entities.
Currently I am working on a new course called âThe Road to Nextâ which will hopefully match the popularity of The Road to React . We will create a full-stack Next application which goes all the way from fundamental React knowledge to accessing a serverless database. I am more than excited to share all my knowledge about Next.js with you. If you are interested , check out the website and join the waitlist.
If you have done the previous tutorial (including the database seeding), you should already render the initial data directly from a Prisma query in a React Server Component. This will be the starting point for this tutorial:
Next you also want to read a single post. Therefore we will use Nextâs Link component to navigate to a new page which should show the individual post:
On this new page, you can access the postId from the URL and fetch the post data from the database. Again we are using a React Server Component to await the data fetching before rendering the component:
From here we want to add the ability to create, update, and delete posts. We will use Server Actions to achieve this and not have to convert any Server Component into a Client Component.
In this tutorial, we will create all server actions next to the server components. However, in a real-world application, you would likely extract these server actions into a separate file. I like to use feature folders for this purpose.
Anyway, we will start with the create action. We will add a form to the Home component to create a new post. The form will use a Server Action to create the post in the database and then revalidate the home page to show the new post:
The tutorial will not show how to enhance these forms with validation, error handling, loading states, and user feedback (e.g. toast messages). If you want to learn more about this, check out how to handle Forms in Next with Server Actions .
Next, we will add the ability to update a post. Therefore we will need a new page for editing an individual post. Letâs enabled our users to navigate to this page from the home page:
On this new page, we will add a form to edit the post. Note how we use a hidden input to send the postâs id too, because we need it to identify the post in the database:
The server action will be declared in the same file. It reads the id and name from the formData and updates the post in the database. Then revalidate the home page and redirect to it:
The one gotcha from this example is that we are using a hidden input to send the postâs id with the server action. There are alternative to it though.
For deleting a post, we need a HTML button in the UI. However, with only a button, how would we execute the server action? In the case of a Client Component, we could use an event handler for the button which would execute the server action. But we want to make it happen without using a Client Component.
Here is a little trick to make it happen. We can use a form with only a button. In addition, in order to get the postâs id to delete, we can bind the server action to the identifier. This way, the server action will receive the postâs id as an argument:
Thatâs it. After deleting a post, we are revalidating the home page to show the updated list of posts.
This tutorial showed how to use Server Actions in Next.js to create, read, update, and delete entities. We used React Server Components to render the initial data from the database and Server Actions to interact with the database. We were not required to convert any Server Component into a Client Component to achieve this.
You can find the repository for this tutorial over here . If you want to go beyond this tutorial, check out âThe Road to Nextâ and get on the waitlist!