Server Actions in Next.js

Server actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. It enables efficient, secure handling of server-side operations like data fetching, form processing, and database interactions, enhancing application security and performance by managing sensitive tasks server-side.

In this article, we will learn about Server Actions in Next.js with Examples.

What are Server Actions 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.

Syntax:

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.

'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.

// Server Component
export default function Page() {

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

You can aslo pass the server component as a prop to the client component

<SomeClientComponent action={serverAction}  />

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest app_name

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

Example: The below example demonstrate the implementation of server action in next.js

In this example, we are saving the form data into a data.json file. We can also use server action in a Form Action Attribute. Note: Remove the include css file from layout.js

//File path: src/app/page.js

'use client';
import formSubmit from './formSubmitServerAction.js'
import formData from '../../data.json'

export default function Page() {

    return (
        <div style={{ display: 'flex', gap: "3%", margin: "10px" }}>
            <form action={(e) => formSubmit(e)}>
                <label>Name</label>
                <input type="text"
                    placeholder="Enter Your Name"
                    name="name" required />
                <br />
                <label>Age</label>
                <input type="text"
                    placeholder="Enter Your Age"
                    name="age" required />
                <br />
                <label>City</label>
                <input type="text"
                    placeholder="Enter Your City"
                    name="city" required />
                <br />
                <button type="submit">Submit</button>
            </form>

            <br /><br />
            <table border={2} cellPadding={10}>
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Age</td>
                        <td>City</td>
                    </tr>
                </thead>
                <tbody>
                    {
                        formData.map((item, key) => {
                            return (
                                <tr key={key}>
                                    <td>{item.name}</td>
                                    <td>{item.age}</td>
                                    <td>{item.city}</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    );
}

//File path: src/app/formSubmitServerAction.js

'use server'
import fs from 'fs';
import formData from '../../data.json'

const formSubmit = async (e) => {
    const name = e.get('name')
    const age = e.get('age')
    const city = e.get('city')

    formData.push({ name, age, city })
    fs.writeFileSync('data.json', JSON.stringify(formData, null, 4))
}

export default formSubmit;

//File path: ./data.json (root) (Remove this comment while implementing) 

[  ]

Start your application using the command:

npm run dev

Output: Open http://localhost:3000 to view the output.

Conclusion

Server actions in Next.js make it easy to manage tasks that need to run on the server, like fetching data, handling forms, and interacting with databases. This approach ensures your sensitive operations are secure and your application runs smoothly. Using simple directives like "use server," you can define these functions in both server and client components, making your development process more straightforward and efficient. This not only boosts your app's security but also its overall performance.