Розробка Serverless Functions для сайту (Vercel Functions)
Vercel Functions — це серверні функції, які розгортаються разом зі статичним сайтом або Next.js-додатком. Жодної інфраструктури: push у git → функція доступна через /api/....
Як влаштовані Vercel Functions
Файли в директорії api/ (для Vite/SPA) або app/api/ (для Next.js App Router) автоматично стають серверними ендпоїнтами. Підтримуються Node.js, Edge Runtime, Python, Ruby, Go.
Приклад: функція форми зворотного зв'язку
Файл 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: `Нове повідомлення від ${name}`,
text: `Від: ${name} <${email}>\n\n${message}`,
});
return res.status(200).json({ ok: true });
}
Функція доступна за адресою 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();
// Додавання в 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 });
}
Змінні оточення
У Vercel Dashboard → Settings → Environment Variables. Для локальної розробки — .env.local:
RESEND_API_KEY=re_...
DATABASE_URL=postgresql://...
Vercel автоматично не передає змінні з NEXT_PUBLIC_ на сервер — лише на клієнт. Серверні секрети не додавайте з цим префіксом.
Обмеження безплатного плану
- Максимальний час виконання: 10 секунд (Hobby), 60 секунд (Pro)
- Розмір відповіді: 5 MB
- 100 GB-годин виконання на місяць
- Регіони: один регіон на Hobby, всі регіони на Pro
Для більшості сайтів плану Hobby достатньо.
Терміни
Базові API-функції (форма, підписка, webhook) — 1–2 дні, включаючи розгортання та налаштування змінних оточення.