How to Use Vercel: A Step - by - Step Guide for Developers

Decloak is an AI-powered web security intelligence platform that scans a site's HTTP/TLS posture, JavaScript, and third-party scripts to produce a report anyone can read. This guide is part of Decloak's library of practical, source-backed security guidance.

Key takeaways

• Install the Vercel CLI with npm i -g vercel (Node 18+ required).
• Authenticate once with vercel login and the CLI stores a token.
• Link a local folder to a Vercel project using vercel link or create a new project with vercel.
• Deploy a preview with vercel and a production build with vercel --prod.
• Use vercel dev for local development that mirrors Vercel’s production environment.
• Configure custom domains, environment variables, redirects, and cron jobs via the dashboard or vercel.json.
• Add serverless functions by placing files in an api/ (or app/api/) directory.
• Manage deployments from the dashboard or with CLI commands like vercel redeploy and vercel logs.

What is Vercel and why should I use it?

Vercel is a cloud platform that simplifies deploying modern web apps with zero - config builds, automatic preview URLs, and built - in serverless functions. It lets you focus on code while handling scaling, CDN distribution, and TLS automatically.

How do I install the Vercel CLI?

Run npm i -g vercel in a terminal; the command installs the Vercel tool globally and requires Node 18 or newer. After installation you can run vercel --help to see all available commands.

How do I authenticate the CLI with my Vercel account?

Execute vercel login and follow the interactive prompt to open a browser window. After you authorize, the CLI stores a token locally so subsequent commands run without re - authenticating.

How can I link a local folder to an existing Vercel project?

Navigate to your project directory and run vercel link. The CLI asks you to select the Vercel project you want to associate with the folder. If you need a brand - new project, simply run vercel and answer the creation prompts.

How do I deploy a preview versus a production build?

• Preview deployment: vercel creates a unique URL (e.g., my - app - abc123.vercel.app) useful for pull - request testing.
• Production deployment: vercel --prod publishes to the primary domain you configured (e.g., my - app.vercel.app). Both commands output the URL in the terminal.

How can I develop locally with the same environment as Vercel?

Run vercel dev inside your project directory. The command starts a local server that uses Vercel’s build output, respects vercel.json settings, and serves serverless functions just like the cloud platform.

How do I connect a Git repository without using the CLI?

1. Sign in at vercel.com and click New Project.
2. Authorize Vercel to access GitHub, GitLab, or Bitbucket.
3. Select the repository; Vercel auto - detects the framework (Next.js, React, etc.).
4. Click Deploy. Every push to the linked branch automatically creates a new preview (or production) deployment.

How do I add a custom domain to my Vercel project?

In the dashboard go to Project → Settings → Domains, click Add, and follow the DNS instructions (CNAME for subdomains or A record for apex domains). Vercel automatically provisions TLS certificates for the domain.

How can I set environment variables for different stages?

• Dashboard method: Settings → Environment Variables, then choose Production, Preview, or Development scope.
• CLI method: vercel env add <NAME> <scope> (e.g., vercel env add API_KEY production). The values are never exposed in the build logs.

How do I configure redirects, rewrites, headers, or cron jobs?

Create a vercel.json file at the repository root. Example for a permanent redirect:

{
 "redirects": [
 { "source": "/old", "destination": "/new", "permanent": true }
 ]
}

Add a crons array for scheduled functions, e.g., "crons": [{ "path": "/api/cleanup", "schedule": "0 0 * * *" }].

How do I add serverless functions (API routes) to my Vercel app?

Place a file in an api/ directory (or app/api/ for Next 13). Vercel automatically bundles it as a serverless function. Example TypeScript function:

// api/hello.ts
export async function GET(request: Request) {
 const res = await fetch('https://api.example.com/data');
 const data = await res.json();
 return Response.json(data);
}

After deployment the endpoint is reachable at https://<project>.vercel.app/api/hello.

How can I manage existing deployments?

• Dashboard: Filter, delete, or click Redeploy on any previous build.
• CLI: vercel redeploy <deployment-id> to trigger a new build from the same source, and vercel logs <deployment-id> to view runtime logs.

What advanced deployment options does Vercel offer?

What should I do after my first deployment?

1. Add a custom domain.
2. Set environment variables for API keys and database URLs.
3. Enable Vercel Web Analytics if you need visitor insights.
4. Protect preview URLs with password or IP restrictions.
5. Create additional serverless functions for backend logic.
6. Review CI/CD settings and enable branch protection in your Git provider.

Quick cheat - sheet

npm i -g vercel # install CLI
vercel login # authenticate
cd my-app && vercel link # link or create project
vercel # preview deployment
vercel --prod # production deployment
vercel dev # local development
vercel env add API_KEY production
vercel rm <deployment-id> # delete a deployment