How to deploy your AI-built app to Vercel (UK guide)

You have built something. Maybe you used Claude Code to scaffold a Next.js app. Maybe Lovable generated a landing page. Maybe you vibe-coded a full SaaS over the weekend. Whatever the tool, you have got code that works locally, and now you need the world to see it.

Deployment used to be the hard part. Configuring servers, managing SSL certificates, setting up CI/CD pipelines, figuring out DNS records. It was the graveyard where side projects went to die -- not because the product was bad, but because the founder ran out of energy before going live.

Vercel changed that. You can go from local code to a live URL in under 10 minutes. This guide covers the full process -- including the UK-specific bits that generic tutorials skip.

Why Vercel for UK builders

Before we dive in, here is why Vercel makes sense for most UK indie builders:

Speed to deploy. Push to GitHub, and your site is live. No server configuration, no Docker files, no infrastructure management. For a solo builder or small team, this is transformative.

Free tier that actually works. Vercel's hobby plan gives you unlimited deploys, serverless functions, and edge network distribution. You can run a real product on it until you are making money.

European edge network. Vercel serves your app from the nearest edge location. For UK users, that means London or Amsterdam -- sub-50ms response times. Your app feels fast because it is physically close to your users.

Built for Next.js. If your AI tool generated a Next.js app (and most of them do -- Claude Code, Lovable, and Bolt all default to it), Vercel is the natural home. Zero-config deployment with automatic optimisation.

Prerequisites

You will need:

• Your app code in a GitHub repository (or GitLab/Bitbucket)
• A Vercel account (sign up free at vercel.com)
• Node.js 20+ installed locally
• About 15-30 minutes

If your code is not in a Git repo yet, sort that first:

cd your-project
git init
git add .
git commit -m "Initial commit"
gh repo create your-project --public --push

Step 1: Connect your repository

Log in to Vercel and click "Add New Project." You will see a list of your GitHub repositories. Select the one with your app.

Vercel automatically detects your framework. If it is Next.js, it knows exactly how to build and deploy it. If it is a plain React app, Vite project, or static site, it handles those too.

What if you do not see your repo? Check that you have granted Vercel access to the right GitHub organisation or account. Click "Adjust GitHub App Permissions" in the Vercel dashboard if needed.

Step 2: Configure environment variables

This is where most deployments fail. Your app works locally because you have a .env.local file with API keys and database URLs. Vercel does not have that file -- you need to add those variables to the Vercel dashboard.

Go to your project settings, then "Environment Variables." Add every variable from your .env.local file:

Variable	Example	Where to get it
NEXT_PUBLIC_SUPABASE_URL	https://xxx.supabase.co	Supabase dashboard > Settings > API
NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJhbG...	Same location
SUPABASE_SERVICE_ROLE_KEY	eyJhbG...	Same location (keep this secret)
STRIPE_SECRET_KEY	sk_live_...	Stripe dashboard > Developers > API keys
STRIPE_WEBHOOK_SECRET	whsec_...	Stripe dashboard > Webhooks

Critical rule: Any variable prefixed with NEXT_PUBLIC_ is exposed to the browser. Never put secret keys (database passwords, Stripe secret keys, service account credentials) in NEXT_PUBLIC_ variables. Those go in server-only variables.

You can also use the Vercel CLI to pull and push environment variables:

npm i -g vercel
vercel login
vercel env pull .env.local    # pull from Vercel to local
vercel env add VARIABLE_NAME  # add a new variable

Step 3: Configure your build settings

For most AI-generated Next.js apps, the default settings work perfectly. But check these:

• Build command: next build (or npm run build)
• Output directory: .next (automatic for Next.js)
• Install command: npm install (or pnpm install if you use pnpm)
• Node.js version: 20.x (match your local version)

If your build fails, the most common causes are:

1. Missing environment variables -- Vercel's build log will tell you which variable is undefined
2. TypeScript errors -- your local dev server might ignore these, but next build catches them
3. Import path issues -- case sensitivity matters on Linux (Vercel's build environment) even if it did not matter on Windows

Step 4: Deploy

Click "Deploy." Vercel will:

1. Clone your repository
2. Install dependencies
3. Run your build command
4. Deploy to its global edge network

First deploy usually takes 60-90 seconds. You will get a URL like your-project-abc123.vercel.app. Click it. Your app is live.

Every subsequent push to your main branch triggers an automatic deploy. Push to a feature branch, and you get a preview deployment with its own URL -- perfect for testing before merging.

Step 5: Add a custom domain

Your Vercel URL works, but you want yourdomain.co.uk pointing to your app. Here is how:

1. In Vercel, go to your project > Settings > Domains
2. Type your domain (e.g., myapp.co.uk) and click Add
3. Vercel will show you DNS records to add

If your domain is registered with a UK registrar (Namecheap, 123 Reg, GoDaddy UK, etc.), go to their DNS management panel and add the records Vercel shows you. Typically:

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

DNS propagation takes anywhere from 5 minutes to 48 hours, but usually under 30 minutes for UK registrars. Vercel automatically provisions an SSL certificate once DNS is verified -- no configuration needed.

Pro tip: If you want both myapp.co.uk and www.myapp.co.uk to work, add both in Vercel and set one as the redirect target.

Step 6: Configure for UK users

A few Vercel settings matter specifically for UK-focused apps:

Region selection

By default, Vercel's serverless functions run in Washington DC (iad1). For UK users, change this to London:

1. Go to project Settings > Functions
2. Set the region to lhr1 (London)

This cuts function execution latency from ~120ms to ~20ms for UK users. If your app makes database calls, make sure your database is also in a European region (Supabase's London region, for example).

Analytics

Vercel Analytics gives you page views, web vitals (LCP, FID, CLS), and geographic data. Enable it in your project settings. It is cookieless, so no GDPR cookie banner needed -- one less thing to worry about.

Add the analytics component to your layout:

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Speed Insights

Vercel Speed Insights monitors your Core Web Vitals in production. Enable it for real-user performance data:

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Step 7: Set up preview deployments

Every pull request to your repo gets its own preview URL. This is incredibly useful for:

• Testing changes before they go live
• Sharing progress with co-founders or early users
• Running QA against a production-like environment

Preview deployments use the same environment variables as production by default. If you need different values for previews (e.g., a test Stripe key instead of live), add environment-specific variables in Vercel's settings, scoping them to "Preview" only.

Step 8: Handle common deployment issues

Build fails with "Module not found"

Your AI tool might have generated imports that work locally but fail in production. Common causes:

• Case sensitivity: import Header from './header' works on Windows but fails on Linux if the file is Header.tsx. Match the exact filename case.
• Missing dependency: Check that all packages in your import statements are in package.json. Run npm install locally and commit the updated package-lock.json.

API routes return 500 errors

Check Vercel's function logs (project dashboard > Deployments > click latest > Functions tab). The most common cause is missing environment variables. Vercel's runtime does not read .env.local -- every variable must be set in the dashboard.

Images not loading

If you are using next/image with external sources, add the domains to your next.config.js:

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'your-image-source.com' },
    ],
  },
};

Stripe webhooks not working

After deploying, update your Stripe webhook endpoint URL from localhost:3000/api/webhooks/stripe to yourdomain.co.uk/api/webhooks/stripe. Create a new webhook endpoint in the Stripe dashboard with your production URL and update the STRIPE_WEBHOOK_SECRET in Vercel.

Step 9: Set up a deployment workflow

For solo builders, the simplest workflow is:

1. Develop locally with npm run dev
2. Push to a feature branch -- Vercel creates a preview deploy
3. Test the preview URL -- click around, check everything works
4. Merge to main -- Vercel deploys to production automatically

This gives you zero-downtime deployments with a safety net. If something breaks, Vercel keeps the previous deployment available and you can instantly rollback from the dashboard.

Cost breakdown for UK builders

Vercel's pricing in context:

Plan	Price	What you get
Hobby	Free	Unlimited deploys, 100GB bandwidth, serverless functions
Pro	~GBP16/month	Team features, more bandwidth, longer function execution
Enterprise	Custom	SLA, dedicated support, advanced security

For most indie builders and early-stage startups, the Hobby plan is plenty. You will only need Pro when you are consistently hitting bandwidth limits or need team collaboration features -- by which point you should have revenue to cover it.

Going live checklist

Before you share your URL with the world:

• Custom domain configured and SSL active
• All environment variables set (check production, not just preview)
• Serverless function region set to lhr1 (London)
• Vercel Analytics enabled
• Stripe webhooks pointing to production URL
• Meta tags and Open Graph images set for social sharing
• Favicon and app icons in place
• 404 page works (try a random URL)
• Mobile responsive (test on your phone)
• GDPR basics covered (privacy policy page, cookie notice if applicable)

What comes next

Your app is live. That is the hardest psychological barrier cleared. Now:

1. Submit to Google Search Console -- add your domain and submit your sitemap
2. Set up error monitoring -- Vercel integrates with Sentry for production error tracking
3. Tell people -- share your URL on Twitter/X, LinkedIn, Reddit, Indie Hackers
4. Watch the analytics -- Vercel Analytics will show you who is visiting and from where
5. Iterate -- your first deploy is not your last. Ship improvements weekly.

The gap between "it works on my machine" and "it is live on the internet" is now about 10 minutes. There has never been a better time to ship.

FAQs

Is Vercel free for commercial projects?

Vercel's Hobby plan is free and allows commercial use for personal projects. If you are building a product that generates revenue, they expect you to upgrade to the Pro plan (about GBP16/month) once you outgrow the Hobby limits. In practice, you can run a real product on the Hobby plan until you have meaningful traffic.

Can I deploy a non-Next.js app to Vercel?

Yes. Vercel supports React (Vite, Create React App), Vue, Svelte, Nuxt, Astro, plain HTML, and more. Next.js gets the deepest integration, but any framework that produces static files or serverless functions works. If your AI tool generated a Vite app, Vercel deploys it just fine.

How do I handle environment variables for different environments?

Vercel lets you scope environment variables to Production, Preview, or Development. Set your live Stripe key for Production, test Stripe key for Preview, and local values for Development. Each deployment type reads only its scoped variables. Use vercel env pull to sync the right set locally.

What happens if my deployment breaks?

Every deployment on Vercel is immutable. If your latest deploy breaks, you can instantly roll back to any previous deployment from the dashboard -- one click, zero downtime. The previous version stays available until you explicitly choose to redeploy. This is why push-to-deploy is safe even for production.

How do I set up a staging environment?

Create a staging branch in your repo. Vercel will automatically create preview deployments for it. Add staging-specific environment variables scoped to Preview. You now have three environments: local development, staging (preview deploys from the staging branch), and production (deploys from main). No extra configuration needed.

Key takeaways

• Vercel turns deployment from a multi-day infrastructure task into a 10-minute process -- push to GitHub and your app is live
• Set your serverless function region to lhr1 (London) for the best performance for UK users
• Every environment variable from your .env.local file must be added to Vercel's dashboard -- this is the number one cause of failed deployments
• Preview deployments give you a safety net -- test every change on a real URL before it goes to production
• The Hobby plan is free and sufficient for most early-stage products -- upgrade when you have revenue, not before

Looking for data-backed business ideas to build with these tools? Check out our latest free report at ideastack.co