Next.js

# .env.local
NEXT_PUBLIC_WAITLIST_KEY=your_key_here

# For API routes (server-only)
WAITLIST_KEY=your_key_here

// pages/api/waitlist.ts
import type { NextApiRequest, NextApiResponse } from 'next';

type ResponseData = {
  success: boolean;
  message: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ success: false, message: 'Method not allowed' });
  }

  const { email, name } = req.body;

  // Custom validation
  if (!email || !email.includes('@')) {
    return res.status(400).json({ success: false, message: 'Invalid email' });
  }

  // Rate limiting (simple example)
  // In production, use upstash/redis or similar
  
  try {
    // Forward to Waitlister
    const response = await fetch(
      `https://waitlister.me/s/${process.env.WAITLIST_KEY}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ email, name })
      }
    );

    if (!response.ok) {
      throw new Error('Submission failed');
    }

    // Optional: Log to your database, send to analytics, etc.
    
    return res.status(200).json({ success: true, message: 'Successfully joined waitlist' });
  } catch (error) {
    console.error('Waitlist error:', error);
    return res.status(500).json({ success: false, message: 'Failed to join waitlist' });
  }
}

// app/api/waitlist/route.ts
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  try {
    const body = await request.json();
    const { email, name } = body;

    // Validation
    if (!email || !email.includes('@')) {
      return NextResponse.json(
        { success: false, message: 'Invalid email' },
        { status: 400 }
      );
    }

    // Forward to Waitlister
    const response = await fetch(
      `https://waitlister.me/s/${process.env.WAITLIST_KEY}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ email, name })
      }
    );

    if (!response.ok) {
      throw new Error('Submission failed');
    }

    return NextResponse.json({ 
      success: true, 
      message: 'Successfully joined waitlist' 
    });
  } catch (error) {
    console.error('Waitlist error:', error);
    return NextResponse.json(
      { success: false, message: 'Failed to join waitlist' },
      { status: 500 }
    );
  }
}

// Enable Edge Runtime for global performance
export const runtime = 'edge';

// components/WaitlistForm.tsx
'use client';

import { useState, FormEvent } from 'react';

export default function WaitlistForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, name })
      });

      const data = await response.json();

      if (data.success) {
        setSuccess(true);
        setEmail('');
        setName('');
      } else {
        setError(data.message || 'Failed to join waitlist');
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="success-message">
        <h3>You're on the list! 🎉</h3>
        <p>We'll notify you when we launch.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="waitlist-form">
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        required
      />
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Your name (optional)"
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Joining...' : 'Join Waitlist'}
      </button>
      {error && <div className="error-message">{error}</div>}
    </form>
  );
}

// app/actions/waitlist.ts
'use server';

export async function submitToWaitlist(formData: FormData) {
  const email = formData.get('email') as string;
  const name = formData.get('name') as string;

  // Validation
  if (!email || !email.includes('@')) {
    return { success: false, message: 'Invalid email' };
  }

  try {
    const response = await fetch(
      `https://waitlister.me/s/${process.env.WAITLIST_KEY}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ email, name })
      }
    );

    if (!response.ok) throw new Error('Submission failed');

    return { success: true, message: 'Successfully joined!' };
  } catch (error) {
    return { success: false, message: 'Failed to join waitlist' };
  }
}

// Use in component:
// 'use client';
import { submitToWaitlist } from '@/app/actions/waitlist';
import { useFormStatus } from 'react-dom';

export default function WaitlistForm() {
  return (
    <form action={submitToWaitlist}>
      <input type="email" name="email" required />
      <input type="text" name="name" />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Joining...' : 'Join Waitlist'}
    </button>
  );
}

// middleware.ts (App Router)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Add CORS headers if needed
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', 'POST');
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type');

  return response;
}

export const config = {
  matcher: '/api/:path*',
};

# Using Vercel CLI
vercel env add WAITLIST_KEY
vercel env add NEXT_PUBLIC_WAITLIST_KEY

# Then deploy
vercel --prod