home / skills / ominou5 / funnel-architect-plugin / deploy-vercel

deploy-vercel skill

safe

This skill deploys funnel pages to Vercel with CLI setup, framework detection, environment variables, and custom domain configuration to accelerate launches.

npx playbooks add skill ominou5/funnel-architect-plugin --skill deploy-vercel

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.6 KB

---
name: deploy-vercel
description: >
  Deploys funnel pages to Vercel. Covers CLI setup, project init,
  framework detection, environment variables, and custom domains.
---

# Deploy to Vercel

Best for React/Next.js funnels and projects that benefit from edge functions.

## Prerequisites
- Node.js installed
- Vercel account (free Hobby tier works for funnels)

## Setup

```bash
# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy (first time — will prompt for config)
vercel

# Deploy to production
vercel --prod
```

## Configuration (`vercel.json`)

```json
{
  "headers": [
    {
      "source": "/(.*).html",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=300" }]
    },
    {
      "source": "/(.*).css",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    },
    {
      "source": "/(.*).js",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}
```

## Custom Domain
1. Go to **Project settings → Domains**
2. Add your domain
3. Update DNS: add A record `76.76.21.21` or CNAME to `cname.vercel-dns.com`
4. SSL is automatic

## Environment Variables
```bash
# Add via CLI
vercel env add VARIABLE_NAME

# Or via Dashboard: Project settings → Environment Variables
```

## Framework Support
Vercel auto-detects: Next.js, React (Vite/CRA), Astro, and static HTML.
No additional configuration needed for supported frameworks.

Overview

This skill deploys funnel pages to Vercel and streamlines CLI setup, project initialization, framework detection, environment variables, and custom domain configuration. It focuses on fast, reliable deployments for React, Next.js, and static HTML funnels, with sensible defaults for caching and redirects. Use it to get landing pages live quickly with production-ready settings.

How this skill works

The skill guides you through installing and logging into the Vercel CLI, initializing a project, and running first-time and production deployments. It provides a recommended vercel.json with cache-control headers, redirects, and clean URL settings, plus step-by-step instructions for adding environment variables and connecting custom domains. Vercel’s auto-detection handles Next.js, React (Vite/CRA), Astro, and static sites so minimal framework configuration is required.

When to use it

You need a fast, edge-ready host for React/Next.js funnels.
Deploying static landing pages with optimized caching rules.
Connecting a custom domain with automatic SSL.
Managing secrets and environment variables for server-side functions.
When you want zero-config deployments with Vercel auto-detection.

Best practices

Install and log into the Vercel CLI locally for repeatable deployments (npm install -g vercel; vercel login).
Use vercel --prod for production releases and vercel for preview deployments.
Add aggressive immutable caching for static assets (CSS/JS) and short caching for HTML to serve updates quickly.
Store API keys and secrets in Vercel environment variables, not in source code.
Use redirects in vercel.json for moved or consolidated pages to preserve SEO and links.

Example use cases

Deploy a Next.js sales funnel to take advantage of edge functions and fast SSR.
Host static landing pages with long-lived caching for CSS/JS and short caches for HTML.
Integrate webhook-driven lead capture endpoints using Vercel serverless functions.
Point a branded domain to your funnel and get automatic SSL without DNS complexity.
Quickly iterate on copy and layout using preview deployments for A/B testing.

FAQ

Do I need a paid Vercel plan to deploy funnels?

No. The free Hobby tier supports typical funnel workloads, but paid plans offer stronger concurrency, analytics, and team features.

How do I add environment variables securely?

Use vercel env add via the CLI or add them in Project settings → Environment Variables in the dashboard; never commit secrets to source control.