How to Deploy Vercel Securely (2026)

In April 2026, a wave of Next.js apps deployed on Vercel were found leaking API keys through a single naming mistake: NEXT_PUBLIC_OPENAI_KEY. Every visitor's browser downloaded the key as plain text. Most of those developers had done everything else right. They used Vercel's environment variables panel, added .env to .gitignore, kept secrets out of git. The NEXT_PUBLIC_ prefix is what got them.

This guide covers that issue and six others that security scanners commonly flag on fresh Vercel deployments.

Step 1: Audit NEXT_PUBLIC_ Environment Variables

This is the check that matters most. Run it before every production deploy.

# Find variables the app reads from process.env with the public prefix
grep -r "NEXT_PUBLIC_" src/ --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx"
grep -r "NEXT_PUBLIC_" app/ --include="*.ts" --include="*.tsx" 2>/dev/null

// app/api/chat/route.ts
import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY, // No NEXT_PUBLIC_ prefix
});

export async function POST(request: Request) {
  const { message } = await request.json();
  const response = await client.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: message }],
  });
  return Response.json({ reply: response.choices[0].message.content });
}

Step 2: Configure Security Headers

Vercel sets no security headers by default. Add them via vercel.json in your project root:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains"
        },
        {
          "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()"
        },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.openai.com"
        }
      ]
    }
  ]
}

Adjust the CSP connect-src to match the third-party APIs your app actually calls. Deploy, then run your app through securityheaders.com or CheckYourVibe to verify.

For Next.js, you can also set headers in next.config.js:

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-Content-Type-Options", value: "nosniff" },
        ],
      },
    ];
  },
};

The vercel.json approach applies before Next.js processes the request. Use it for headers that should apply to all routes including static assets.

Step 3: Enable Deployment Protection on Preview Deploys

Every pull request on Vercel generates a preview URL like my-app-git-pr-42-yourteam.vercel.app. By default, anyone with that URL can access your app, including any staging or test data.

To lock it down:

1. Go to your Vercel project dashboard.
2. Click Settings > Deployment Protection.
3. Enable Vercel Authentication. Visitors must log in with a Vercel account to view any preview.
4. For extra protection on production, enable Password Protection (Pro plan feature).

Step 4: Scope Environment Variables by Target

Vercel lets you assign each variable to one or more targets: Production, Preview, and Development. Most teams skip this and use the same key everywhere.

The right pattern:

To set this in Vercel: when you add or edit a variable, click the checkbox for each environment. Uncheck Production for test credentials and uncheck Preview/Development for live credentials.

This limits blast radius. If a preview deploy is misconfigured and exposes a variable, it exposes a test key that can't charge real money or write to your production database.

Step 5: Protect Public API Routes

Every file under app/api/ or pages/api/ is a public HTTP endpoint that anyone on the internet can call. A fresh Next.js app has several of these, and it's easy to forget they exist.

Minimum checks before every API route goes live:

// app/api/data/route.ts
import { NextRequest, NextResponse } from "next/server";
import { getCurrentUser } from "@/lib/auth"; // your auth helper

export async function GET(request: NextRequest) {
  // 1. Check authentication before doing anything else
  const user = await getCurrentUser(request);
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // 2. Only return data this user owns
  const data = await db.query(
    "SELECT * FROM records WHERE user_id = $1",
    [user.id]  // parameterized query, not string interpolation
  );

  return NextResponse.json(data);
}

For unauthenticated public routes (contact forms, newsletter signups), add rate limiting. Without it, a simple loop can spam your database or trigger automated email sends.

Step 6: Custom Domain and HTTPS Setup

When you connect a custom domain, Vercel provisions a TLS certificate automatically. A few things to check:

{ "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains; preload" }

Step 7: Scan Before Going Public

Before switching your DNS to point at the Vercel deployment, scan your preview URL. A scanner reads your app the way an attacker would: fetching the public pages, inspecting the JavaScript bundle, checking response headers.

CheckYourVibe specifically flags:

• NEXT_PUBLIC_-prefixed variables visible in the bundle
• Missing Content-Security-Policy, X-Frame-Options, and HSTS headers
• Exposed API endpoints that return data without authentication
• Common Next.js misconfigurations (open redirects in callback URLs, debug endpoints left active)

Run the scan on the preview URL first. That way, any findings are in a non-production environment, and you can fix them before real users arrive.