원클릭으로 Manus에서 모든 스킬 실행

시작하기

vercel-expert

스타38

포크15

업데이트2026년 3월 14일 18:18

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Klimabevaegelsen

Klimabevaegelsen/landbruget.dk

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

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