What are NextJS Server Actions?

Actions are currently an experimental feature within React, which enable you to pass async functions to the action prop on an element, for example on a HTML form. Server Actions allow you create/modify data on the server without going through an API or endpoint - they can be invoked from both server-side and client-side components. These actions can be defined in either server components or in a separate file for reusability.

Client Actions invoke a server action within the function body but you cannot definer server actions in a client component (you can import them and then use them in client component though). Form Actions are integrated into the <form> API and enable progressive enhancement and loading state capabilities out of the box.

Server functions run on th server but can be called from the client. Usually used within server actions to perform server-side logic. Server mutations refers to the process of modifying data on the server using server actions.

Config Set up in NextJS

At the time of writing this post, Server Actions are still experimental, so you will have to had the following to your config.

module.exports = {
  experimental: {
    serverActions: true,
  },
};

Code Example

Here is a skeleton of a form:

export default function Form() {
  async function handleSubmit() {
    "use server";
    // Your server action logic here
  }

  async function submitImage() {
    "use server";
    // Your server action logic here
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Submit</button>
    </form>
  );
}

A small example using revalidatePath (so the change can only be seen when the page is refreshed):

import { revalidatePath } from "next/cache";

let count: number = 0;

export default function Home() {
  async function increment() {
    "use server";
    count++;
    revalidatePath("/");
  }

  return (
    <div>
      <h1>Count</h1>
      <span>{count}</span>
      <form action={increment}>
        <button type="submit">Increment</button>
      </form>
    </div>
  );
}

If you wanted to use the above as a server action on the client side, you would have to import it as follows:

"use server";

export async function increment() {
  "use server";
  count++;
  revalidatePath("/");
}

In Short…

Server Components

A server action can be defined within a server component.

Client Components

If the component is a client component, you cannot define the server action in the client component, you must import it.

Size Limit

The maximum request body sent to a Server Action is 1MB by default and if you would like to increase this, you can do so in the config.

module.exports = {
  experiment: {
    serverActions: true,
    serverActionsBodySizeLimit: "2mb",
  },
};

🧠 Please Note

This is a brief summary and it would be better to have a back-end of some kind to be able to truly show the main functionality of NextJS Server Actions.