mcpField
V
vercel

vercel

github.com/hoodini云与 DevOps291173 次安装1 天前更新
代码仓库

关于 vercel

vercel 是面向使用 Vercel 部署应用的开发者的部署技能，涵盖 CLI 发布、函数配置和平台资源示例。内容还涉及环境变量、定时任务以及 Next.js 的增量静态再生成。

主要功能

  1. 01使用 Vercel CLI 部署
  2. 02配置无服务器与 Edge Functions
  3. 03设置 Next.js 增量静态再生成
  4. 04管理环境变量
  5. 05配置 Cron 定时任务

适用场景

  1. 01将应用部署到 Vercel
  2. 02实现 API 或 Edge 函数
  3. 03运行定时后台任务

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/vercel确认已加载。

详细介绍

Vercel 部署

在 Vercel 边缘网络上部署和扩展应用。

快速开始

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Production deploy
vercel --prod

vercel.json 配置

{
  "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"
  }
}

无服务器函数

// 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}!` });
}

边缘函数

// 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（增量静态再生）

// 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;
}

环境变量

# Add secret
vercel env add DATABASE_URL production

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

# List env vars
vercel env ls

定时任务

// 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();
}

资源

评论

支持 Markdown