Run any Skill in Manus with one click

Get Started

vercel-expert

Stars38

Forks15

UpdatedMarch 14, 2026 at 18:18

Vercel deployment patterns — environments, env vars, preview deployments, ISR, and edge config for Next.js

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Klimabevaegelsen

Klimabevaegelsen/landbruget.dk

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Network and Computer Systems AdministratorsComputer and Mathematical Occupations·SOC 15-1244

SKILL.md

readonly

name	vercel-expert
description	Vercel deployment patterns — environments, env vars, preview deployments, ISR, and edge config for Next.js

Vercel Expert

Environments

Vercel has three built-in environments:

Environment	Trigger	URL
Production	Push/merge to `main`	Your domain
Preview	Push to any other branch / PR	Auto-generated URL
Local	`npm run dev`	`localhost:3000`

Custom environments (staging, qa) available on Pro+ plans.

Environment Variables

# Pull env vars for local development
vercel link          # link local dir to Vercel project
vercel env pull      # populates .env.local

# Add env var via CLI
vercel env add MY_SECRET production
vercel env add MY_SECRET preview
vercel env add MY_SECRET development

# Deploy to custom environment
vercel deploy --target=staging
vercel env pull --environment=staging

In code, always access via process.env.MY_VAR. Client-safe vars must be prefixed NEXT_PUBLIC_.

Deployment

# Preview deploy (default)
vercel

# Production deploy
vercel --prod

Every push to a non-main branch automatically creates a Preview deployment with:

A unique URL (commit-specific)
A branch URL (always points to latest on that branch)
PR comments with the preview link (when connected to GitHub)

ISR with Next.js

// Tag-based revalidation (preferred)
const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'], revalidate: 3600 }
})

// Revalidate on-demand in a Server Action
import { revalidateTag } from 'next/cache'
revalidateTag('posts')

// Time-based ISR
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 } // seconds
})

On Vercel, ISR pages are:

Cached globally on the CDN
Persisted to durable storage (not just in-memory)
Updated in ~300ms globally on revalidation

Vercel-Specific Headers

// Route Handler reading Vercel geo headers
export function GET(request: NextRequest) {
  const country = request.headers.get('x-vercel-ip-country')
  const city = request.headers.get('x-vercel-ip-city')
  return NextResponse.json({ country, city })
}

next.config.ts Patterns

import type { NextConfig } from 'next'

const config: NextConfig = {
  // Redirect
  async redirects() {
    return [{ source: '/old', destination: '/new', permanent: true }]
  },
  // Rewrite (proxy)
  async rewrites() {
    return [{ source: '/api/:path*', destination: 'https://backend.example.com/:path*' }]
  },
  // Security headers
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
      ],
    }]
  },
  // Image domains
  images: {
    remotePatterns: [{ protocol: 'https', hostname: '**.supabase.co' }],
  },
}

export default config

Proxy / Middleware

The project uses proxy.ts (Next.js 16 naming) for session refresh. In Vercel, proxy/middleware runs at the Edge globally before any cache:

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}

Analytics & Speed Insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/next'
import { SpeedInsights } from '@vercel/speed-insights/next'

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

OG Image (built into Next.js 16)

// app/opengraph-image.tsx — no extra package needed
import { ImageResponse } from 'next/og'
// @vercel/og is included in next/og automatically

Rules

Set env vars per-environment in the Vercel dashboard or via CLI
NEVER commit .env.local — it's gitignored
Use vercel env pull to sync env vars to local
Preview deploys are automatic — every branch push triggers one
ISR on Vercel is globally distributed; self-hosted ISR is single-region
Proxy/middleware runs at Edge, before cache — keep it lightweight (no Node.js APIs)
Use NEXT_PUBLIC_ prefix only for values safe to expose to the browser

More from this repository

same repository

data-pipeline-operations

Klimabevaegelsen/landbruget.dk

Activates when working with Python data pipelines, GCS operations, or medallion architecture (Bronze/Silver/Gold). Use this skill for: running pipelines, debugging data transformations, GCS uploads/downloads, data quality validation, CVR/CHR/BFE identifier handling, GeoPandas/PostGIS operations, and DuckDB queries for large files. Keywords: pipeline, bronze, silver, gold, GCS, parquet, CVR, CHR, BFE, transform, ingest, ETL, DuckDB, large files

2026-04-1238

r2-husdyr-data

Klimabevaegelsen/landbruget.dk

Activates when querying livestock and animal data from R2. Use this skill for: CHR registry, pig movements, animal welfare, antibiotics, animal density, mortality rates, herd tracking, svineflytning. Keywords: husdyr, livestock, animal, dyr, CHR, svin, pig, ko, cattle, antibiotika, dyrevelfærd, flytning, movement

2026-04-0638

r2-landbrugsareal-data

Klimabevaegelsen/landbruget.dk

Activates when querying agricultural land and field data from R2. Use this skill for: field boundaries, crop data, land use, organic farming, production estimates, cadastral data, agricultural blocks, building data. Keywords: landbrugsareal, field, mark, marker, crop, afgrøde, organic, økologisk, production, areal, cadastral, matrikel

2026-04-0638

r2-medarbejdere-data

Klimabevaegelsen/landbruget.dk

Activates when querying employee and workplace safety data from R2. Use this skill for: Arbejdstilsynet inspections, work permits, safety violations, workplace accidents, compliance rates, foreign workers, incident tracking. Keywords: medarbejdere, employees, worker, arbejdstilsynet, inspection, tilsyn, safety, arbejdsmiljø, accident, ulykke, compliance

2026-04-0638

r2-miljo-data

Klimabevaegelsen/landbruget.dk

Activates when querying environmental data from R2. Use this skill for: pesticides, nitrogen leaching, BNBO drinking water protection, wetlands, soil types, environmental compliance, biodiversity. Keywords: miljø, environment, pesticide, pesticid, nitrogen, kvælstof, BNBO, wetlands, vådomr, soil, jord, biodiversity

2026-04-0638

r2-okonomi-data

Klimabevaegelsen/landbruget.dk

Activates when querying financial/economic data from R2. Use this skill for: subsidies, farm financials, property values, CVR enrichment, ownership data, støtte per hektar, samlet støtte, grundværdi. Keywords: økonomi, finance, subsidies, støtte, tilskud, CVR, property, ejendom, grundværdi

2026-04-0638

name	vercel-expert
description	Vercel deployment patterns — environments, env vars, preview deployments, ISR, and edge config for Next.js

Vercel Expert

Environments

Vercel has three built-in environments:

Environment	Trigger	URL
Production	Push/merge to `main`	Your domain
Preview	Push to any other branch / PR	Auto-generated URL
Local	`npm run dev`	`localhost:3000`

Custom environments (staging, qa) available on Pro+ plans.

Environment Variables

# Pull env vars for local development
vercel link          # link local dir to Vercel project
vercel env pull      # populates .env.local

# Add env var via CLI
vercel env add MY_SECRET production
vercel env add MY_SECRET preview
vercel env add MY_SECRET development

# Deploy to custom environment
vercel deploy --target=staging
vercel env pull --environment=staging

In code, always access via process.env.MY_VAR. Client-safe vars must be prefixed NEXT_PUBLIC_.

Deployment

# Preview deploy (default)
vercel

# Production deploy
vercel --prod

Every push to a non-main branch automatically creates a Preview deployment with:

A unique URL (commit-specific)
A branch URL (always points to latest on that branch)
PR comments with the preview link (when connected to GitHub)

ISR with Next.js

// Tag-based revalidation (preferred)
const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'], revalidate: 3600 }
})

// Revalidate on-demand in a Server Action
import { revalidateTag } from 'next/cache'
revalidateTag('posts')

// Time-based ISR
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 } // seconds
})

On Vercel, ISR pages are:

Cached globally on the CDN
Persisted to durable storage (not just in-memory)
Updated in ~300ms globally on revalidation

Vercel-Specific Headers

// Route Handler reading Vercel geo headers
export function GET(request: NextRequest) {
  const country = request.headers.get('x-vercel-ip-country')
  const city = request.headers.get('x-vercel-ip-city')
  return NextResponse.json({ country, city })
}

next.config.ts Patterns

import type { NextConfig } from 'next'

const config: NextConfig = {
  // Redirect
  async redirects() {
    return [{ source: '/old', destination: '/new', permanent: true }]
  },
  // Rewrite (proxy)
  async rewrites() {
    return [{ source: '/api/:path*', destination: 'https://backend.example.com/:path*' }]
  },
  // Security headers
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
      ],
    }]
  },
  // Image domains
  images: {
    remotePatterns: [{ protocol: 'https', hostname: '**.supabase.co' }],
  },
}

export default config

Proxy / Middleware

The project uses proxy.ts (Next.js 16 naming) for session refresh. In Vercel, proxy/middleware runs at the Edge globally before any cache:

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}

Analytics & Speed Insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/next'
import { SpeedInsights } from '@vercel/speed-insights/next'

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

OG Image (built into Next.js 16)

// app/opengraph-image.tsx — no extra package needed
import { ImageResponse } from 'next/og'
// @vercel/og is included in next/og automatically

Rules

Set env vars per-environment in the Vercel dashboard or via CLI
NEVER commit .env.local — it's gitignored
Use vercel env pull to sync env vars to local
Preview deploys are automatic — every branch push triggers one
ISR on Vercel is globally distributed; self-hosted ISR is single-region
Proxy/middleware runs at Edge, before cache — keep it lightweight (no Node.js APIs)
Use NEXT_PUBLIC_ prefix only for values safe to expose to the browser