Working with Server Actions (Next.js 13 Experimental)

What are server actions?

Server actions are an experimental feature from the new Next.js 13 release. They allow developers to write code that will run on the server, within server components to be used inside your /app folder.

This allows us to write server side code much faster as we don't need to create route handlers to hide sensitive information.

Using server actions

To start using server actions, you have to enable them within your next.config.js file.

To start writing your first one, you must write "use server" at the top of your function if written within a server component, or as the first line if written in an external file.

Once that line is included, you will be able to use the same functions available to you from previous API routes. You are also free to include environment variables safely without having to worry about them being sent to the client.

The most common use cases for server actions will involve forms and querying databases for writes and updates.

Examples of this in action can be seen in the official Next.js documentation of server actions found here.

Last updated: 2023-05-31

Emilio Noa