Next.js Server Actions - The Ultimate Guide (Coming Soon)

Server Actions refer to asynchronous functions that run on the server side. These functions can be utilized within both Server and Client Components for managing form submissions and data mutations in apps built with Next.js.

Article image

To make a function a Server Action in Next.js, simply use the "use server" command at the start. If you put it at the start of a file, then every function you share from that file is treated as a Server Action.

Using Server Actions for form submissions

  1. We can pass a server action to submit a form by passing it in the acctions of a form.
  2. We can't pass an inline "use server" annotated server action in client components.
  3. We can pass a server action from a server component to t he client component or we move our server action to a separate file marked as a 'use server'.
  4. Only server actions are allowed to pass between client and server components in Next.js.
  5. Form acctions pass an object of type FormData to the function that will be called.
  6. Server actions in server components acts like clousures and if we use any variables from outside of server acction function it keeps the value of the variable. First Next.js pass the encrypted value of the variable to the client and then upon using the value Next.js passes again to the server and use it there.
  7. If we pass extra parameters to the function that will be called in form acctions in server components we need to user bind() to the bind extra parameters to our server acction function.