Loading
Get your code live on the internet — from localhost to a real URL anyone can visit.
When you run npm run dev, your app runs on localhost — only you can see it. Deploying means putting your app on a server so anyone with the URL can access it.
The modern deployment pipeline:
Your Code → Git Push → Build Server → CDN → UsersKey terms:
Understanding the pipeline helps you debug deployment issues.
Before deploying, make sure your project builds successfully:
Common build failures:
.env.local for dev, configure them in your hosting platform for productiondependencies (not just devDependencies) if they're needed at runtimeAlways verify the build passes locally before deploying.
Vercel is built by the Next.js team and offers the smoothest deployment experience:
First-time setup:
That's it. Your app is live.
What happens automatically:
main triggers a new production deploymentAdding environment variables:
NEXT_PUBLIC_SUPABASE_URL)Connect your repository and deploy. It should take under 2 minutes.
Your free Vercel URL looks like my-project-abc123.vercel.app. To use your own domain:
Vercel automatically provisions an SSL certificate — your site will have HTTPS.
This step is optional but makes your project look professional.
Never commit secrets to git. Use environment variables instead:
Rules:
NEXT_PUBLIC_ are exposed to the browser — only use for public valuesNEXT_PUBLIC_ on secrets like database passwords or service role keysIn Vercel: Add the same variables in your project settings. You can have different values for Production, Preview, and Development environments.
Proper secret management prevents security disasters.
After deploying, monitor your app:
Vercel Dashboard:
Build logs are your first stop when a deployment fails. They show the exact error that broke the build.
Common deployment issues:
| Problem | Cause | Fix | | ------------- | ---------------------- | ----------------------------------------- | | Build fails | TypeScript/lint errors | Fix errors locally, push again | | 500 errors | Missing env variables | Add them in Vercel settings | | Blank page | Client-side crash | Check browser console on the deployed URL | | Stale content | Caching | Redeploy or clear the CDN cache |
Check your Vercel dashboard after deploying. Look at the build logs.
Before every production deployment:
npm run build passes locallynpm run lint passes with no warningsnpm run typecheck passes with no errorsYour code is live on the internet. Share the URL with someone.
What's next? Learn How to Build and Consume APIs to connect your frontend to real data sources.
# Install dependencies
npm install
# Run the production build
npm run build
# Test the production build locally
npm run start# .env.local (local development — gitignored)
NEXT_PUBLIC_SUPABASE_URL=https://abc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb