What is Server Action in Next.js

Server Action is an Asynchronous server function that can be used on the server side as well as the client side. It is used to handle operations related to the server, such as Form Submissions, Data Updating ( mutations ), Authentication, and Background Tasks such as Email Sending, etc.

To define a Component as a server, You can use a “use server”; directive at the top of an async function or top of the separate file to mark the function as a Server Action.

If you are using Server Action in a client component then you have to make a separate file for the server action and put it in the client component to use that server action.

Syntax:

'use server'
 
export async function formSubmit() {
//other code
}

If you are using Server Action in a server component then you directly define the server action in your component function and use that.

Syntax:

// Server Component
export default function Page() {

  // Server Action
  async function formSubmit() {
    'use server'
 
    //Server Action Logic
  }
 
  return (
    //component element
  )
}

NextJS is a React framework that is used to build full-stack web applications. Server actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. In this article, we will learn about Server Actions in Next.js with Examples.