Are Next.js Server Actions Stable? An In-Depth Guide

Next.js, a powerful React framework, has been making waves in the web development community with its robust features and capabilities. One such feature that has garnered attention is the concept of Server Actions. But before we dive into that, let's answer a crucial question: Are Next.js server actions stable?

As of the time of writing, Server Actions is an experimental feature in Next.js 12. It's not yet considered a stable feature, but it's being actively developed and improved. The feature is expected to be stable in the upcoming Next.js 13.

So, what are server actions? Server Actions in Next.js are a new way to handle form submissions, run code on the server, and fetch data from your database or API. They allow you to write functions that run on the server and can be invoked from the client side.

Here's a basic example of a server action:

Copy
1
2
3
4
5
6
// app/actions.js
'use server'

export async function myAction() {
  // ...
}

In the above code, we define an async function myAction, with the 'use server' directive at the top of the function. This directive ensures that the function will only run on the server.

Understanding Server Components and Server Actions in Next.js

Server components in Next.js are a new type of component that can be rendered on the server and sent to the client as HTML. These components allow you to write code that will run on the server, and they can use server actions to handle form submissions, fetch data, and more.

Server actions can be defined inside server components or in a separate file for reusability. Here's an example of defining a server action inside a server component:

Copy
1
2
3
4
5
6
7
// app/page.js
export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

In the above code, we define a server action myAction inside the ServerComponent. This action can be used to handle form submissions, fetch data, or perform any other server-side operations.

Server actions can also be defined in a separate file and imported into server and client components. This allows you to reuse server actions across multiple components. Here's an example:

Copy
1
2
3
4
5
6
// app/actions.js
'use server'

export async function myAction() {
  // ...
}

Copy
1
2
3
4
5
6
// app/server-component.js
import { myAction } from './actions'

export default function ServerComponent() {
  // Use myAction here
}

In the above code, we define a server action myAction in a separate file actions.js and import it into a server component. This allows us to reuse the myAction server action in multiple components.

How to Use Server Actions in Client Components

Server actions can also be used in client components in Next.js. This allows you to invoke server-side code from client-side components, providing a seamless integration between client and server.

Here's an example of how to use a server action in a client component:

Copy
1
2
3
4
5
6
// app/actions.js
'use server'

export async function myAction() {
  // ...
}

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// app/client-component.js
'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Submit</button>
    </form>
  )
}

In the above code, we define a server action myAction in a separate file actions.js and import it into a client component. The server action is then used as the action for a form in the client component. When the form is submitted, the server action is invoked.

This allows you to handle form submissions on the server side, even from client components. This is a powerful feature that allows you to write server-side code in a way that is easy to use and understand.

Working with API Routes and Server Actions

API routes in Next.js allow you to create API endpoints for your Next.js application. These API routes can fetch data, handle form submissions, and more.

Server actions can be used with API routes to handle form submissions and fetch data. Here's an example:

Copy
1
2
3
4
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// app/client-component.js
'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form action="/api/hello">
      <button type="submit">Say Hello</button>
    </form>
  )
}

In the above code, we define an API route /api/hello that returns a simple JSON response. Then, in a client component, we create a form that, when submitted, requests this API route. This is a simple example, but it illustrates how server actions and API routes can work together.

Invoking Server Actions: Methods and Examples

Server actions can be invoked in several ways in Next.js. The most common way is to use the action prop on a form. When a form with an action prop is submitted, the server action specified in the action prop is invoked. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// app/client-component.js
'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Submit</button>
    </form>
  )
}

In the above code, the myAction server action is invoked when the form is submitted. The myAction server action must be an async function that takes a single argument: the form data.

Another way to invoke server actions is to use the formAction prop on a button or input element. The formAction prop specifies the server action to be invoked when the button or input is clicked. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// app/client-component.js
'use client'

import { myAction } from './actions'

export default function ClientComponent() {
  return (
    <form>
      <button formAction={myAction} type="submit">Submit</button>
    </form>
  )
}

In the above code, the myAction server action is invoked when the button is clicked. The myAction server action must be an async function that takes a single argument: the form data.

Finally, server actions can be invoked using the startTransition function. This allows you to invoke server actions without using a form. However, this method disables progressive enhancement, a feature that allows forms to function properly even if JavaScript is disabled or fails to load. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
// app/client-component.js
'use client'

import { startTransition, myAction } from './actions'

export default function ClientComponent() {
  return (
    <button onClick={() => startTransition(() => myAction())}>Submit</button>
  )
}

In the above code, the myAction server action is invoked when the button is clicked, without needing a form.

Progressive Enhancement and Size Limitation in Server Actions

Progressive enhancement is a design philosophy that emphasizes core webpage functionality will work without JavaScript. In the context of server actions, forms will still function even if JavaScript is disabled or fails to load.

By default, the maximum size of the request body sent to a server action is 1MB. This limit is in place to prevent the server from consuming excessive resources when parsing large amounts of data. However, this limit can be configured using the serverActions.bodySizeLimit option in the Next.js configuration file. Here's an example:

Copy
1
2
3
4
5
6
7
8
// next.config.js
module.exports = {
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
}

In the above code, the maximum size of the request body for server actions is set to 2MB.

Conclusion: The Stability of Next.js Server Actions

In conclusion, while server actions in Next.js are not yet considered stable, they are a powerful feature allowing seamless integration between client and server code. They allow you to handle form submissions, fetch data, and perform other server-side operations directly from your client-side components.

As with any new feature, it's important to thoroughly test server actions in your application and keep an eye on the Next.js release notes for updates on the stability and improvements of this feature. With the upcoming release of Next.js 13, we can expect server actions to become a stable feature that will further enhance the capabilities of Next.js applications.