Next.js Server Actions
Server Actions, useFormState, useFormStatus, mutations, progressive enhancement, revalidation
1What is a Server Action in Next.js?
What is a Server Action in Next.js?
Answer
A Server Action is an asynchronous function that executes only on the server and can be called directly from Client or Server components. It handles data mutations (POST, PUT, DELETE) without creating an explicit API route. Server Actions simplify code by avoiding the duplication of API route + client-side fetch call.
2How to declare a Server Action in a separate file?
How to declare a Server Action in a separate file?
Answer
To create a Server Action in a separate file, add the 'use server' directive at the top of the file and export async functions. This approach is recommended for reusability and separation of concerns. Functions can then be imported into any Client or Server component.
3What is the difference between a Server Action and an API route?
What is the difference between a Server Action and an API route?
Answer
Server Actions are callable directly from components without creating an explicit REST endpoint, while API routes require an HTTP call (fetch). Server Actions simplify code by avoiding route + client call duplication. They're optimal for simple mutations, but API routes remain useful for public endpoints or webhooks.
How to use a Server Action in an HTML form?
What type of data does a Server Action receive from a form?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free