All guidesVercel and env vars
On this page

Vercel guides

Vercel

Vercel for AI-built apps: the deploy, env var and function questions

By Ohad Krispin, founder of VibeRaven · LinkedIn

Most Vercel problems in an AI-built app show up on the first real deploy and fall into four groups: variables the deployment does not have, values that reach the browser when they should not, routes that return 404, and functions that crash or run out of time. Each question below has its own page, answered from Vercel's, Next.js's and Supabase's docs. Start with the symptom you see.

Checklist

Before the first production deploy on Vercel

  1. 01Set every variable the code reads for Production and Preview before the first build, and redeploy after each change.
  2. 02Keep secrets out of NEXT_PUBLIC_ and VITE_ names, and store them as the Secret type.
  3. 03Add the index.html rewrite if the app is a Vite or React single-page app.
  4. 04Set maxDuration on routes that wait on a model, within your plan's limit.
  5. 05Point Postgres clients in functions at the Supabase transaction pooler, port 6543.
  6. 06Open the production URL and run the main flow as a new user.

By symptom

Vercel questions, by symptom

A variable works locally and is undefined on Vercel

Usually the name is missing for that environment, read under another name, or newer than the deployment.

Go deeper: Vercel env vars not working in production: 5 checks

A secret key in a NEXT_PUBLIC_ variable

Next.js copies every NEXT_PUBLIC_ value into the browser bundle at build time.

Go deeper: Are NEXT_PUBLIC_ environment variables exposed to the browser?

Sensitive, Secret and Config variables

Vercel renamed Sensitive to Secret: write-only once saved, and no help with a public prefix.

Go deeper: What are sensitive environment variables on Vercel?

Supabase variables from the Vercel integration

Which of the synced names the browser, the server and a Postgres client should read.

Go deeper: Which env vars does the Supabase Vercel integration add?

Go deeper: Why does my Vercel app hit "Max client connections reached" on Supabase?

A function returns 500 FUNCTION_INVOCATION_FAILED

The process crashed. The exception is in the Logs tab; a missing variable is a common one.

Go deeper: Vercel "This Serverless Function has crashed": what FUNCTION_INVOCATION_FAILED means and how to fix it

A function returns 504 FUNCTION_INVOCATION_TIMEOUT

The function ran past its maximum duration, often while it waited on a model.

Go deeper: Why does my Vercel function time out with FUNCTION_INVOCATION_TIMEOUT?

A deep link or a refresh returns 404

A single-page app needs one rewrite to index.html.

Go deeper: Why does my Vite or React app 404 on refresh on Vercel?

Google sign-in fails on the custom domain

The callback URL the provider allows does not match the domain the app runs on.

Go deeper: Why does Google login work in preview but fail on my custom domain?

CORS errors after the deploy

Vercel Functions do not add CORS headers for you.

Go deeper: CORS error after Vercel deploy: how to diagnose and fix it

No analytics events from the deployed app

Trace one action from the production URL to the receiving project.

Go deeper: PostHog events not showing in a Vite app on Vercel

Related

Sources

Official docs behind this checklist

FAQ

FAQ for builders before launch

Does Vercel publish its own production checklist?

Yes. Vercel's production checklist covers the Vercel project itself, grouped into operational excellence, security, reliability, performance efficiency and cost optimization. The pages here cover the app problems that show up between a working preview and production.