Next.js

How to Deploy a Next.js App Built with AI

Take a Next.js project from your local machine to a live, publicly accessible URL with environment variables handled correctly.

Intermediate10 min read

Browse tools for this See related prompts

Why deployment trips people up after AI-assisted builds

Code that runs with `npm run dev` on your machine isn't automatically ready to deploy. AI coding tools happily hardcode API keys, skip environment variable handling, and generate code that passes locally but fails a production build (`next build` is stricter than the dev server about type errors and unused code). This tutorial closes that gap.

Step 1: Make sure the project actually builds

Run a production build locally before you touch a deploy platform. This catches type errors, missing environment variables, and broken imports that the dev server silently tolerates.

terminal

npm run build
npm run start
# open http://localhost:3000 and click through the app as a real visitor would

Step 2: Move secrets into environment variables

If your AI tool wrote an API key directly into a file, fix that now — it becomes public the moment your repository is pushed to GitHub, even in a private repo that later goes public.

.env.local

# never commit this file — it should be in .gitignore
DATABASE_URL=postgres://user:pass@host:5432/db
API_SECRET_KEY=sk_live_your_key_here
NEXT_PUBLIC_SITE_URL=https://example.com

Step 3: Push the project to GitHub

terminal

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourname/your-repo.git
git push -u origin main

Step 4: Connect it to a hosting platform

Vercel is the most common choice for Next.js specifically because the framework and the platform are built by the same team, but any Node-compatible host works. The steps below describe the general flow, which is similar across most providers.

Import the GitHub repository from your hosting dashboard
It should auto-detect the Next.js framework and set the build command to `next build`
Add every variable from your `.env.local` file to the platform's environment variables settings — they are not read from your repo
Trigger the first deploy and watch the build log for errors

Step 5: Verify scripts and config are production-ready

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Step 6: Add a custom domain

Add the domain in your hosting platform's dashboard
Update your domain registrar's DNS records with the values it gives you (usually a CNAME or A record)
Wait for DNS propagation and confirm HTTPS is issued automatically before sharing the link

Post-deploy checklist

Click through every page on the live URL, not just the homepage
Check the browser console for errors that only appear in production mode
Confirm environment variables are actually being read (test any feature that depends on an API key)
Set up a redeploy trigger so future pushes to `main` deploy automatically

Tools