mcpField
V
vercel

vercel

github.com/hoodiniCloud & DevOps291173 installsUpdated 1d ago
Repository

About vercel

vercel is a deployment skill for developers deploying applications on Vercel. It covers CLI deployments, function configuration, environment variables, scheduled jobs, and examples such as Next.js incremental static regeneration.

Key features

  1. 01Deploy with Vercel CLI
  2. 02Configure serverless and Edge Functions
  3. 03Set up Next.js ISR
  4. 04Manage environment variables
  5. 05Configure Cron jobs

Use cases

  1. 01Deploy an application to Vercel
  2. 02Build API or Edge functions
  3. 03Run scheduled background jobs

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hoodini/ai-agents-skills --skill vercel

After installing, type/vercelin Claude Code to confirm it loaded.

Details

From the project README

Vercel Deployment

Deploy and scale applications on Vercel's edge network.

Quick Start

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Production deploy
vercel --prod

vercel.json Configuration

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["iad1", "sfo1"],
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 30
    }
  },
  "rewrites": [
    { "source": "/api/:path*", "destination": "/api/:path*" },
    { "source": "/:path*", "destination": "/" }
  ],
  "headers": [
    {
      "source": "/api/:path*",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ],
  "env": {
    "DATABASE_URL": "@database-url"
  }
}

Serverless Functions

// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default function handler(req: VercelRequest, res: VercelResponse) {
  const { name = 'World' } = req.query;
  res.status(200).json({ message: `Hello ${name}!` });
}

Edge Functions

// api/edge.ts
export const config = {
  runtime: 'edge',
};

export default function handler(request: Request) {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    headers: { 'content-type': 'application/json' },
  });
}

Next.js App Router

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

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') ?? 'World';
  
  return NextResponse.json({ message: `Hello ${name}!` });
}

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json({ received: body });
}

ISR (Incremental Static Regeneration)

// app/posts/[id]/page.tsx
export const revalidate = 60; // Revalidate every 60 seconds

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ id: post.id }));
}

export default async function Post({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);
  return <article>{post.content}</article>;
}

Vercel KV (Redis)

import { kv } from '@vercel/kv';

// Set
await kv.set('user:123', { name: 'Alice', visits: 0 });

// Get
const user = await kv.get('user:123');

// Increment
await kv.incr('user:123:visits');

// Hash operations
await kv.hset('session:abc', { userId: '123', expires: Date.now() + 3600000 });
const session = await kv.hgetall('session:abc');

Vercel Postgres

import { sql } from '@vercel/postgres';

// Query
const { rows } = await sql`SELECT * FROM users WHERE id = ${userId}`;

// Insert
await sql`INSERT INTO users (name, email) VALUES (${name}, ${email})`;

// Transaction
await sql.query('BEGIN');
try {
  await sql`UPDATE accounts SET balance = balance - ${amount} WHERE id = ${from}`;
  await sql`UPDATE accounts SET balance = balance + ${amount} WHERE id = ${to}`;
  await sql.query('COMMIT');
} catch (e) {
  await sql.query('ROLLBACK');
  throw e;
}

Environment Variables

# Add secret
vercel env add DATABASE_URL production

# Pull env vars locally
vercel env pull .env.local

# List env vars
vercel env ls

Cron Jobs

// vercel.json
{
  "crons": [
    {
      "path": "/api/daily-job",
      "schedule": "0 0 * * *"
    }
  ]
}

// api/daily-job.ts
export default function handler(req, res) {
  // Verify it's from Vercel Cron
  if (req.headers['authorization'] !== `Bearer ${process.env.CRON_SECRET}`) {
    return res.status(401).end();
  }
  
  // Run job
  await runDailyJob();
  res.status(200).end();
}

Resources

Comments

Markdown supported