So far, we’ve worked with , also known as , in the new Next.js App Router structure. These are essentially serverless functions provided by Vercel that let you build backend functionality directly within your Next.js app.

We’ve already:

• Created Route Handlers to implement social account creation in our database using NextAuth.
• Explored how they simplify backend logic by keeping it close to the front end.

The key takeaway so far is that API Routes are Versatile, which is a great choice for traditional REST-like API endpoints instead of spending ages of time building our own backend. But that isn’t the only way.

Welcome,

Server Actions

Server Actions, introduced in and supported in the Next.js App Router, represent a fresh approach to backend logic. They allow you to call async functions executed on the server** directly from **client components**, offering a streamlined way to handle server-side operations.

Here’s why Server Actions are exciting:

• Server-Side Execution

  These functions run securely on the server, making them ideal for tasks like database queries or sensitive operations.

• Client-Side Simplicity

  From the client’s perspective, calling a Server Action feels just like calling a regular JavaScript function—no HTTP requests or API routes required.

• Cleaner Code

  Server Actions reduce the boilerplate needed to connect the client and server, making your codebase simpler and more maintainable.

The community has quickly embraced this new approach, and you’ll see it in any latest open-source GitHub repositories using Next.js, which boosts efficiency and ease of use. It’s becoming a major part of an ecosystem, and Vercel plans to expand this in the future.

That said, learning how to use them now will keep you ahead of the curve and aligned with industry standards. That’s what exactly the goal is.

---

Best of Both Worlds

To provide you with a complete understanding of backend development in Next.js, we’ll explore and implement both Server Actions and API Routes/Route Handlers. By mastering both, you’ll gain the flexibility to choose the right approach for any situation.

Here’s what we’ll do step by step,

1. Explore Server Actions with a Demo

   We’ll begin by introducing Server Actions and their capabilities through a practical demo.

   This will give you a clear understanding of how they work and why they’re becoming a popular choice in modern development.

2. Compare Both Approaches

   Next, we’ll directly compare Server Actions and API Routes/Route Handlers by implementing the same functionality using both approaches.

   This comparison will help you see the strengths, limitations, and ideal use cases for each.

3. Implement Server Actions in Authentication

   After the comparison, we’ll proceed with implementing the email-password authentication flow using Server Actions.

   You’ll learn how to use Server Actions for secure, server-side operations in an elegant and modern way.

With this roadmap, you’ll not only stay up-to-date with industry trends but also build a versatile skillset for tackling backend challenges in Next.js.

But,

what about the API Routes we’ve created?

The we created earlier won’t go unused. We’ll repurpose them for managing the profile section of our app.

During this phase, I’ll teach you how to implement and efficient data fetching, making your app highly performant.

Excited? Let’s dive in and start building 🚀