How do you handle form submissions in Next.js?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
Form handling in Next.js has evolved into two primary architectures:
### 1. Modern Approach: Server Actions (App Router - Recommended):
Server Actions allow forms to execute server-side database mutations directly without manually configuring API routes:
// app/contact/page.tsx
export default function ContactForm() {
async function handleSubmit(formData: FormData) {
'use server';
const email = formData.get('email');
const message = formData.get('message');
await db.inquiry.create({ data: { email, message } });
}
return (
<form action={handleSubmit}>
<input type="email" name="email" required />
<textarea name="message" required />
<button type="submit">Send Message</button>
</form>
);
}
### 2. Traditional Approach: Client Fetch to Route Handlers:
Manage local input state with useState or React Hook Form, submitting via fetch to /api/contact:
'use client';
const onSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify(formData),
headers: { 'Content-Type': 'application/json' },
});
};
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.