Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// app/api/contact/route.ts — form handling with Zod validation

import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';

const ContactSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  message: z.string().min(10, 'Message must be at least 10 characters'),
});

// CORS preflight
export async function OPTIONS() {
  return new Response(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': 'https://myapp.com',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

export async function POST(request: NextRequest) {
  const body = await request.json();

// Validate with Zod
  const result = ContactSchema.safeParse(body);
  if (!result.success) {
    return NextResponse.json(
      { errors: result.error.flatten().fieldErrors },
      { status: 422 },
    );
  }

const { name, email, message } = result.data;

// Send email, save to DB, etc.
  await sendContactEmail({ name, email, message });

return NextResponse.json(
    { success: true, message: 'Message sent' },
    {
      headers: { 'Access-Control-Allow-Origin': 'https://myapp.com' },
    },
  );
}