The 13.4 release of Next.js came with a stable App router and the ability to do data mutation with server actions. This feature is an absolute game changer because it lets you perform data mutations entirely from server components. This brings about a host of benefits in areas like speed, security, and overall performance of the app.
Learn what server actions are and how to use this new feature in your Next.js application.
What Are Server Actions?
Server actions allow you to write one-off server-side functions right alongside your server components. This is huge because you no longer need to write API routes when submitting forms or doing any other kind of data mutation, includingGraphQL data mutations.
you’re able to have functions that run on your server, and you can then call them from client or server components. This is an alpha feature in Next.js 13.4, and it’s built on top of React Actions. Using server actions leads to reduced client-side JavaScript, and can help you create progressively enhanced forms.
Server Actions Example
With server actions, you’re able to perform mutations inside Next.js, on the server. Take a look at this new feature with an example Next.js page that renders a form allowing you to create a post.
Here are the imports:
Now for the code to create the post. This function is a server action; it runs on the server and sends the post title and body to the API (which creates the post in the database):
This function gets the post title and body which it then sends to the/postsendpoint via a POST request. It then forces the cache to refresh content associated with the “posts” tag, and redirects back to the homepage.
Here’s a form to collect the new post title and body:
you may see that the form contains no logic relating to creation of the post, just a form action: thecreatePost()function. Recall that the createPost function has the “use server” directive which declares that everything in that function should run on the server.
All the code is running on the server, and your client knows nothing about it. This is because the form is a server component and there’s nothing that is being dynamically rendered on the client.
When you click theSavebutton, Next.js calls thecreatePost()function. This sends the title and body as form data, which gets posted to the local API to save the information.
Revalidating the Post
At the bottom of thecreatePost()function is the following line of code:
To understand what that function does, imagine that you have a posts page. Inside the posts component, you’d call a function namedgetPosts()to get all the posts from your database and render them for the user to see:
ThegetPosts()function would look like this:
This function passes thenextoption along to fetch, allowing you to set a revalidation period. By default, every single fetch request you make inside the server component is cached forever. Keeping track of cache and refreshing it when necessary is an important part ofdata fetching in Next.js.
The above code tells Next.js to cache thepostsdata for up to one hour (3,600 seconds). After an hour, the data becomes stale and Next.js refreshes it to get the most recent data from the database.
Remember that thecreatePost()function callsrevalidateTag(“posts”)once it has finished the rest of its work. This forces Next.js to re-fetch that data which should include the new post that the app just created.
Proof That Your Code Is Running on the Server
To be certain that all the code is running on the server, you can add the following console log statement inside thecreatePost()function:
Then, try to create a new post by clicking the submit button. If your code is running on the server, that log message will show up on your terminal. But if it’s running on the client, then the log will show up in the browser console.
This makes it safe to put sensitive information like environmental variables, database connections, and passwords on the server without fear of it getting exposed to the client. You can thenread the strings from your .env filein your Next.js app.
You may want to reserve use of server actions for versions of Next.js later than 13.4, especially in production. But it’s still really exciting to see where this feature goes since it’s constantly pushing what you can do by moving more and more stuff to the server. It should make your client apps easier to write, and the process of developing them much more enjoyable.
Learn More About Migrating to Next.js
Many front-end developers use React for UI development. But thanks to features like server-side rendering and static site generation, a lot of these developers are migrating their apps to use Next.js. This migration is very straightforward since React is pretty similar to Next.js syntax-wise.
The additional performance and security boost necessitate the migration even more. The ability to have server-side components, coupled with the new server actions we just covered, makes Next.js a more secure and performant option compared to plain React. As a React developer, you should learn how to migrate your app to Next.js.
