Serverless Functions Development for Websites (Vercel Functions)
Vercel Functions are server functions deployed alongside a static website or Next.js application. No infrastructure: push to git → function is available at /api/....
How Vercel Functions Work
Files in the api/ directory (for Vite/SPA) or app/api/ (for Next.js App Router) automatically become server endpoints. Supports Node.js, Edge Runtime, Python, Ruby, Go.
Example: Contact Form Function
File api/contact.ts:
import type { VercelRequest, VercelResponse } from "@vercel/node";
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
export default async function handler(req: VercelRequest, res: VercelResponse) {
if (req.method !== "POST") {
return res.status(405).json({ error: "Method not allowed" });
}
const { name, email, message } = req.body;
if (!name || !email || !message) {
return res.status(400).json({ error: "Missing fields" });
}
await resend.emails.send({
from: "[email protected]",
to: "[email protected]",
subject: `New message from ${name}`,
text: `From: ${name} <${email}>\n\n${message}`,
});
return res.status(200).json({ ok: true });
}
The function is available at https://your-site.vercel.app/api/contact.
Next.js App Router API Routes
// app/api/newsletter/route.ts
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const { email } = await request.json();
// Add to Mailchimp/SendGrid
const response = await fetch("https://api.mailchimp.com/3.0/lists/LIST_ID/members", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.MAILCHIMP_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ email_address: email, status: "subscribed" }),
});
if (!response.ok) {
return NextResponse.json({ error: "Subscription failed" }, { status: 400 });
}
return NextResponse.json({ ok: true });
}
Environment Variables
In Vercel Dashboard → Settings → Environment Variables. For local development — .env.local:
RESEND_API_KEY=re_...
DATABASE_URL=postgresql://...
Vercel automatically doesn't pass variables with NEXT_PUBLIC_ to the server — only to the client. Don't add server secrets with this prefix.
Free Plan Limits
- Maximum execution time: 10 seconds (Hobby), 60 seconds (Pro)
- Response size: 5 MB
- 100 GB-hours of execution per month
- Regions: one region on Hobby, all regions on Pro
For most websites, the Hobby plan is sufficient.
Timeframe
Basic API functions (form, subscription, webhook) — 1–2 days, including deployment and environment variable configuration.