Hello guys... Today we gonna talk about NEXTJS and the SERVER ACTION feature. Check it out!

Let's imagine this scenario. Your company needs to develop a simple HR System to control the time your employee arrives and leaves your company. Very simple, right?

But you have 2 ways to develop this web application:

1º WAY: RESTFUL APIs + Front-End App

In this scenario, collaboration with two developers, one specializing in Backend and the other in Frontend, becomes essential to collectively build the entire application. The Backend developer focuses on tasks such as database management, architecture design, and the development of RESTful APIs. These APIs are then utilized by the Frontend developer to retrieve and display data within the frontend application. Does this align with your understanding?

Resume of this scenario: You need 2 developers to build 2 applications: a Front-End App and the RESTful APIs. You can also use a Fullstack developer, but the time to build the 2 applications will be increased, because he can't works at the same moment in Back-end and Front-End side. In other words, in this scenario you will have many more hours of development.

2º WAY: SERVER ACTIONS in NextJS

In this scenario, you only require a Fullstack NextJS Developer. He will be responsible for constructing both the FRONT-END COMPONENT and, concurrently, generating the SERVER ACTION FILES for each action required in the database. Is this scenario he can works at the same time in back-end logic and front-end logic. Please review the SERVER ACTION + FRONT-END COMPONENT below.

'use server'
export async function createInvoice(formData: FormData) {
  // The action get all data from FORM ACTION and we creating a
  // new object below with the form input content
  const newInvoice = {
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  };
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];
  // Here we don't need more APIs. We can make the actions directly
  // in database. This code will run only in SERVER SIDE 'use server'. 
  // With this we have full security and protection of our database.
  await sql`
    INSERT INTO invoices (customer_id, amount, status, date)
    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}
// Bellow is my FRONT-END COMPONENT with the FORM.
export default function Page(){
    return(
        <form action={createInvoice}>
         <input name="status" type="radio" value="pending" />
         <input name="status" type="radio" value="paid" />
         <input name="amout" type="text" value="" />
         <input name="customerId" type="text" value="UUID_from_customer" />
         <button type='submit'>Create Invoice</button>
        </form>
    )

RESUME: Fewer development hours

With the explanation above, we can understand that depending on the size of the project, using a Fullstack NextJS Developer with SERVER ACTIONS can speed up the delivery process. This is more than clear, that the cost of the project will decrease, bringing exponential savings to the company.

And now. let's work together? If you need some help to understood more about SERVER ACTIONS or you need a Fullstack NextJS Developer, get in touch with me!

That's all folks. See you you in next post!

Eduardo Burko - kduburko@gmail.com