How I Deploy Next.js to Vercel Without Breaking Production

Clicking Deploy on Vercel is easy. Keeping a client site alive after that click is the hard part.

I ship a lot of Next.js work for freelancers and startups. Same bugs show up again and again: missing env vars, broken images, SEO that never indexes, preview links that lie about production. This is the checklist I actually use.

Start with a real production URL

Set NEXT_PUBLIC_SITE_URL to the URL people will open. A free *.vercel.app link is fine until you buy a domain. Canonical tags, Open Graph, and sitemap URLs all depend on this.

If you skip it, Google sees messy relative links and social shares look broken.

Env vars are where most deploys die

Vercel has Production, Preview, and Development scopes. I treat them as three different machines.

Rules that save me hours:

• Never put secrets in NEXT_PUBLIC_*. Those values ship to the browser.
• Copy API keys into Production and Preview, or preview builds fail in weird ways.
• Keep a local .env.example with empty keys so future you knows what to set.

Docs: Vercel environment variables.

Run the build on your laptop first

npm run build

If TypeScript fails locally, Vercel will fail the same way. Fix it before you push. I wasted a whole afternoon once watching red builds because I only tested npm run dev.

Images need an allowlist

next/image only loads remote hosts you list in next.config. If you forget a host, cards show empty gray boxes and alt text. That looks unfinished and kills trust.

Also check your Content Security Policy. If img-src blocks the image host, the browser refuses the image even when the URL is fine.

SEO is not a plugin. It is metadata.

For every public page I want:

1. Unique title and description
2. robots.ts and sitemap.ts
3. Article schema on blog posts
4. Internal links to /projects and /contact

Short stub posts do not rank. Long posts with real steps and official doc links do better. Google's own SEO starter guide is still the best free reference.

Preview, then merge

My flow:

1. Push a branch
2. Open the Vercel Preview URL
3. Click the main pages on mobile
4. Merge to main only after that

Preview is free staging. Use it.

Free domain vs paid domain

You do not need a paid domain on day one. A clear name like alihamza-fawn.vercel.app is enough for clients and search. Buy a custom domain when the work pays for it.

After launch, watch three things

• Search Console for crawl errors
• A simple /api/health route
• Vercel function logs when something 500s

Wrap up

Stable Next.js deploys come from boring habits: correct env vars, a green local build, image hosts allowed in config and CSP, and preview checks before merge.

If you want help shipping a production Next.js site, look at my projects or contact me.