Next.js - Server Actions

Server Actions

The Next.js server actions are asynchronous functions that are executed on the server-side. They are used to perform server-side operations such as data fetching, authentication, handle form submissions, and more.

A Server Action can be defined with the "use server" directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.

Server Action in Client Component

The client-side components will be executed at user's browser. We can import any server actions to client-side component.

// File: app/action.ts (Server Action)

'use server'
 
export async function create() {
    // Create data
    // revalidate cache
    return true;
}

In the below code, we imported the create function to a client-side component. We can call this function from client-side component using onClick event.

// File: app/page.tsx (Client Component)

'use client'
 
import { create } from './actions'
 
export function Button() {
    return <button onClick={() => create()}>
        Create
    </button>
}

Server Action in Form Handling

Next.js provides a Form component, which HTML form element to allow Server Actions to be invoked with the action prop. The form component will automatically handle the submission of the form and invoke the server action.

export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'
 
    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }
 
    // mutate data
    // revalidate cache
  }
 
}

Programmatic Form Submission

You can trigger a form submission programmatically using the requestSubmit() method. For example, when the user submits a form using the + Enter keyboard shortcut, you can listen for the onKeyDown event with following code:

'use client'
 
export function Entry() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (
      (e.ctrlKey || e.metaKey) &&
      (e.key === 'Enter' || e.key === 'NumpadEnter')
    ) {
      e.preventDefault()
      e.currentTarget.form?.requestSubmit()
    }
  }
 
  return (
    <div>
      <textarea name="entry" rows={20} required onKeyDown={handleKeyDown} />
    </div>
  )
}