javascript 44 lines · 7 steps

How a Next.js Server Action validates a form

A server-side action parses form data with Zod, persists it, and redirects — returning structured errors when anything fails.

Explained by highlit

Next.js Intermediate server-actions form-validation zod error-handling progressive-enhancement

1'use server'
2 
3import { z } from 'zod'
4import { redirect } from 'next/navigation'
5import { db } from '@/lib/db'
6import { auth } from '@/lib/auth'
7 
8const ContactSchema = z.object({
9  name: z.string().min(1, 'Name is required').max(80),
10  email: z.string().email('Enter a valid email address'),
11  subject: z.string().min(3, 'Subject must be at least 3 characters'),
12  message: z.string().min(20, 'Message must be at least 20 characters'),
13})
14 
15export async function submitContact(prevState, formData) {
16  const parsed = ContactSchema.safeParse({
17    name: formData.get('name'),
18    email: formData.get('email'),
19    subject: formData.get('subject'),
20    message: formData.get('message'),
21  })
22 
23  if (!parsed.success) {
24    return {
25      errors: parsed.error.flatten().fieldErrors,
26      values: Object.fromEntries(formData),
27    }
28  }
29 
30  const session = await auth()
31 
32  try {
33    await db.message.create({
34      data: { ...parsed.data, userId: session?.user?.id ?? null },
35    })
36  } catch {
37    return {
38      errors: { _form: ['Something went wrong. Please try again.'] },
39      values: parsed.data,
40    }
41  }
42 
43  redirect('/contact/thanks')
44}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Server Actions let a form submit straight to server code without hand-written API routes.
2Returning a shaped state object with errors and values lets the UI re-render with feedback and preserved input.
3safeParse plus a try/catch cleanly separates validation failures from persistence failures.

Related explainers

javascript

const express = require('express');
const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
 
const router = express.Router();

Building an API gateway proxy in Express

reverse-proxy middleware api-gateway

Intermediate 6 steps

rust

use axum::{
    extract::{FromRequestParts, Query},
    http::{request::Parts, StatusCode},
};

Building a custom Axum extractor for query filters

extractors query-parsing enums

Intermediate 8 steps

python

import asyncio
from dataclasses import dataclass
 
import aiohttp

Bounded-concurrency HTTP fetching with asyncio

async concurrency semaphore

Intermediate 8 steps

javascript

import { useCallback, useRef, useState } from 'react';
 
export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
  const [committed, setCommitted] = useState(initialColor);

A validated color picker in React

uncontrolled-inputs refs validation

Intermediate 7 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useRefetchOnFocus(refetch, { staleTime = 30_000 } = {}) {
  const lastFetchedAt = useRef(Date.now());