Skill

deploy-vercel

Vercel deployment pattern library — deploy Next.js / Remix / Nuxt / Astro / SvelteKit / Vite apps to Vercel's edge network. Covers vercel.json config, environment variables (Development / Preview / Production scopes), custom domains and SSL, ISR and on-demand revalidation, edge functions vs serverless functions, image optimization, analytics and speed insights, cron jobs, storage integrations (KV, Postgres, Blob, Edge Config), monorepo deployment with turborepo or pnpm workspaces, and rollback strategies. Use when deploying a web app to Vercel for the first time, configuring environments, setting up custom domains, optimizing functions, debugging build failures, or setting up CI/CD with Git-based deploys. Differentiates from platform-agnostic deployment skills by focusing on Vercel-specific features (ISR, Edge Config, Speed Insights, Vercel KV). Complements deploy-railway, deploy-fly, deploy-cloudflare for multi-platform agencies.

Install

npx claudepluginhub arnwaldn/atum-plugins-collection --plugin atum-workflows

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Vercel est la plateforme par défaut pour Next.js (maintenue par Vercel) et une excellente option pour Remix / Nuxt / Astro / SvelteKit / Vite.

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.6k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.6k

executing-plans

Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.

superpowers

150.3k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 8, 2026

Actions

View Source View Plugin View on GitHub View README

Vercel Deployment Patterns

Vercel est la plateforme par défaut pour Next.js (maintenue par Vercel) et une excellente option pour Remix / Nuxt / Astro / SvelteKit / Vite.

1. Setup initial

# Install CLI
npm install -g vercel

# Login
vercel login

# Link un projet local
cd my-project
vercel link

# Deploy preview
vercel

# Deploy production
vercel --prod

`vercel.json` — config type

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "pnpm build",
  "installCommand": "pnpm install",
  "framework": "nextjs",
  "regions": ["cdg1"],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains; preload" }
      ]
    }
  ],
  "redirects": [
    { "source": "/old-blog/:slug", "destination": "/blog/:slug", "permanent": true }
  ],
  "crons": [
    { "path": "/api/cron/daily-digest", "schedule": "0 9 * * *" }
  ]
}

2. Environment variables

3 scopes

Scope	Usage
Development	`vercel dev` localement (via `vercel env pull`)
Preview	Déploiements PR et branches non-main
Production	Déploiement sur la branche `main` + domaine personnalisé

# Ajouter une var
vercel env add DATABASE_URL production
# Puis coller la valeur

# Pull les vars locales
vercel env pull .env.local

Règle critique : préfixer avec NEXT_PUBLIC_ les vars accessibles côté client. Les autres restent server-only.

3. ISR et on-demand revalidation

// app/blog/[slug]/page.tsx (Next.js App Router)
export const revalidate = 3600 // revalidate every hour

// Ou on-demand
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(request: Request) {
  const { secret, path } = await request.json()
  if (secret !== process.env.REVALIDATION_SECRET) {
    return new Response('Unauthorized', { status: 401 })
  }
  revalidatePath(path)
  return new Response(JSON.stringify({ revalidated: true }))
}

Déclencher depuis un webhook CMS (Sanity, Strapi, Payload) pour invalider le cache à la publication.

4. Edge Functions vs Serverless

// Edge Function (V8 isolate, global)
export const runtime = 'edge'

export async function GET() {
  return new Response('Hello from edge')
}

// Serverless Function (Node.js, par région)
// Pas de runtime = défaut 'nodejs'
export async function GET() {
  return Response.json({ data: await fetchFromDb() })
}

Quand utiliser edge : auth, geolocation, A/B testing, redirects, simple JSON (< 4 MB response, < 30s timeout). Quand utiliser serverless : accès DB via driver, lourd compute, libraries Node-only (fs, crypto natif).

5. Image optimization

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority // si au-dessus du fold
  sizes="(min-width: 1024px) 100vw, 100vw"
/>

Vercel optimise automatiquement en WebP/AVIF, crée les srcset, cache au edge. Gratuit jusqu'à 5000 images uniques / mois sur le plan Hobby.

6. Analytics + Speed Insights

npm install @vercel/analytics @vercel/speed-insights

import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

Gratuit avec quota pour les projets Hobby.

7. Storage

Produit	Usage
Vercel KV (Redis)	Sessions, rate limiting, caches simples
Vercel Postgres	DB relationnelle managée (via Neon)
Vercel Blob	Upload de fichiers (images, PDFs, vidéos)
Edge Config	Feature flags, redirects, config ultra-rapide (read-only en edge)

// Vercel Blob example
import { put } from '@vercel/blob'

const blob = await put('invoices/inv-123.pdf', pdfBuffer, {
  access: 'public',
  contentType: 'application/pdf',
})
console.log(blob.url) // https://xyz.public.blob.vercel-storage.com/invoices/inv-123.pdf

8. Monorepo deployment

Turborepo / pnpm workspaces

// vercel.json à la racine
{
  "buildCommand": "turbo build --filter=@app/web",
  "installCommand": "pnpm install",
  "ignoreCommand": "npx turbo-ignore @app/web"
}

Puis créer un projet Vercel par app du monorepo et lier chacun au même repo avec un Root Directory différent.

9. Custom domains

# Via CLI
vercel domains add example.com

# Assigner à un project
vercel alias set <deployment-url> example.com

Configurer le DNS chez le registrar :

Apex (example.com) → A record → 76.76.21.21
Www (www.example.com) → CNAME → cname.vercel-dns.com

Vercel provisionne SSL automatiquement via Let's Encrypt.

10. Rollback

# Lister les derniers deployments
vercel list

# Promouvoir un deployment ancien en production
vercel promote <deployment-url>

Ou via l'UI : Project → Deployments → ... → Promote to Production.

Anti-patterns

Secrets dans vercel.json → utiliser uniquement vercel env add
Régions multiples sans raison → coût + complexité, préférer cdg1 ou fra1 pour EU
Edge Function + driver Postgres direct → ne fonctionne pas, utiliser un driver HTTP (Neon, PlanetScale) ou une Serverless
Deploy en production sans PR preview → toujours merger via PR pour obtenir le preview URL
Pas de framework dans vercel.json pour un projet custom → Vercel ne détecte pas les bonnes settings
Cron Jobs sans authentification → n'importe qui peut trigger l'endpoint → auth via header secret
revalidate = 0 en production sur une page à fort trafic → rebuild à chaque requête, coût explosif

Checklist deploy Vercel

vercel.json committé
Env vars setup pour Dev / Preview / Prod
Custom domain + SSL vérifié
Build logs vérifiés (0 warning bloquant)
Analytics + Speed Insights activés
Preview deploys marchent sur PR
Production deploy en rollback-ready (deployments antérieurs disponibles)
Rate limits / Cron auth configurés
ISR revalidation webhook configuré depuis le CMS

Quand déléguer

Railway (Node + Postgres alternative) → skill deploy-railway (dans ce plugin)
Fly.io (Docker + edge) → skill deploy-fly (dans ce plugin)
Cloudflare (Workers + Pages + R2) → skill deploy-cloudflare (dans ce plugin)
Mobile (EAS / App Store / Play Store) → skills deploy-eas, deploy-app-store, deploy-play-store

deploy-vercel

Install

Tool Access

Preview

SKILL.md

Similar Skills

deploy-vercel

Install

Tool Access

Preview

SKILL.md

Vercel Deployment Patterns

1. Setup initial

vercel.json — config type

2. Environment variables

3 scopes

3. ISR et on-demand revalidation

4. Edge Functions vs Serverless

5. Image optimization

6. Analytics + Speed Insights

7. Storage

8. Monorepo deployment

Turborepo / pnpm workspaces

9. Custom domains

10. Rollback

Anti-patterns

Checklist deploy Vercel

Quand déléguer

Ressources

Similar Skills

Vercel Deployment Patterns

1. Setup initial

vercel.json — config type

2. Environment variables

3 scopes

3. ISR et on-demand revalidation

4. Edge Functions vs Serverless

5. Image optimization

6. Analytics + Speed Insights

7. Storage

8. Monorepo deployment

Turborepo / pnpm workspaces

9. Custom domains

10. Rollback

Anti-patterns

Checklist deploy Vercel

Quand déléguer

Ressources

`vercel.json` — config type

`vercel.json` — config type