Vercel SDK Patterns
Overview
Build a typed, production-ready wrapper around the Vercel REST API (api.vercel.com). Covers authentication, pagination, error handling, retry logic, and common endpoint patterns for deployments, projects, and environment variables.
Prerequisites
- Completed
vercel-install-auth setup
- TypeScript project with
strict mode enabled
- Vercel access token with appropriate scope
Instructions
Step 1: Create Typed API Client
// lib/vercel-client.ts
interface VercelClientConfig {
token: string;
teamId?: string;
baseUrl?: string;
}
interface VercelError {
error: { code: string; message: string };
}
class VercelClient {
private token: string;
private teamId?: string;
private baseUrl: string;
constructor(config: VercelClientConfig) {
this.token = config.token;
this.teamId = config.teamId;
this.baseUrl = config.baseUrl ?? 'https://api.vercel.com';
}
private async request<T>(
method: string,
path: string,
body?: unknown
): Promise<T> {
const url = new URL(path, this.baseUrl);
if (this.teamId) url.searchParams.set('teamId', this.teamId);
const res = await fetch(url.toString(), {
method,
headers: {
Authorization: `Bearer ${this.token}`,
'Content-Type': 'application/json',
},
body: body ? JSON.stringify(body) : undefined,
});
if (!res.ok) {
const err: VercelError = await res.json();
throw new VercelApiError(res.status, err.error.code, err.error.message);
}
// 204 No Content
if (res.status === 204) return undefined as T;
return res.json() as Promise<T>;
}
// --- Projects ---
async listProjects(limit = 20) {
return this.request<{ projects: VercelProject[] }>(
'GET', `/v9/projects?limit=${limit}`
);
}
async getProject(idOrName: string) {
return this.request<VercelProject>('GET', `/v9/projects/${idOrName}`);
}
// --- Deployments ---
async listDeployments(projectId?: string, limit = 20) {
const params = new URLSearchParams({ limit: String(limit) });
if (projectId) params.set('projectId', projectId);
return this.request<{ deployments: VercelDeployment[] }>(
'GET', `/v6/deployments?${params}`
);
}
async getDeployment(idOrUrl: string) {
return this.request<VercelDeployment>(
'GET', `/v13/deployments/${idOrUrl}`
);
}
// --- Environment Variables ---
async listEnvVars(projectId: string) {
return this.request<{ envs: VercelEnvVar[] }>(
'GET', `/v9/projects/${projectId}/env`
);
}
async createEnvVar(projectId: string, envVar: CreateEnvVarInput) {
return this.request<VercelEnvVar>(
'POST', `/v9/projects/${projectId}/env`, envVar
);
}
// --- Domains ---
async listDomains(projectId: string) {
return this.request<{ domains: VercelDomain[] }>(
'GET', `/v9/projects/${projectId}/domains`
);
}
async addDomain(projectId: string, domain: string) {
return this.request<VercelDomain>(
'POST', `/v9/projects/${projectId}/domains`, { name: domain }
);
}
}
