← Back to Next.js Challenges
Next.jsIntermediate
Implement a Server Action for Form Submission
Tests understanding of Next.js 14 App Router, Server Actions, and form data handling without API routes.
Problem Statement
Create a functional component with a form that submits data (email) directly to the server using a Server Action. If the email is invalid, it should return an error message to the client.
Real World Scenario:
Newsletter signups are everywhere. Instead of writing a separate API route, you want to handle the database insertion directly from the form submission to reduce boilerplate.
Input / Output
Input: User types 'test@example.com' and submits the form.
Output: Server processes it, returns a success message, and the client displays 'Subscribed!'.
Constraints
- Must use the Next.js `useFormState` or standard Server Actions.
- Must not use standard `fetch()` API calls.
- Validation must happen on the server.
Interactive Playground
Loading...
Console Output
Click "Run Code" to see the output here.