Moving Beyond API Routes: Server Actions in Next.js 14
Discover how Next.js 14 Server Actions replace traditional API routes, simplifying your code and bringing backend logic directly into your components.
Category:
- Development
Posted by:
Fahad
Tags:
Posted on:
December 9, 2025
For years, the standard pattern in Next.js was simple: create a form on the client, write a fetch request to /api/submit, and handle the logic in a separate backend file. While this works, it separates your UI from your logic.
With the release of the App Router in Next.js 13/14, Server Actions have changed the game. They allow us to call server-side functions directly from our components, making our code cleaner and reducing the amount of JavaScript sent to the browser.
The Old Way (API Routes) Previously, a simple "Subscribe to Newsletter" feature required two files and a context switch.
Client: Manage useState for loading/error states.
Client: onSubmit handler calling fetch().
Server: A separate file in pages/api/subscribe.js.
The New Way (Server Actions) Now, the logic lives right alongside the UI. Here is how I implemented a contact form in my latest project:
JavaScript
// actions.ts (Server-side code)
'use server'
export async function submitContactForm(formData: FormData) {
const email = formData.get('email');
const message = formData.get('message');
// Direct DB access without an API endpoint!
await db.contacts.create({ email, message });
return { success: true };
}
JavaScript
// ContactForm.tsx (Client Component)
'use client'
import { submitContactForm } from './actions';
export default function ContactForm() {
return (
);
}
Why It Matters
Type Safety: If you use TypeScript, the arguments and return types are validated automatically.
Progressive Enhancement: Forms work even if JavaScript hasn't loaded yet.
Less Code: No more useEffect or manual fetch handling for simple mutations.
Conclusion While API routes are still useful for external webhooks (like Stripe), Server Actions are the superior choice for internal application logic. They bind the backend and frontend closer together, which fits perfectly with the monolithic nature of Next.js.
