Optional: Deploy to Vercel

Learning Objectives

By the end of this step, you'll:

• Know how to deploy your app to Vercel
• Understand how to set environment variables in production
• Have a live, publicly accessible version of your app

Content

What is Vercel?

Vercel is a platform for deploying Next.js apps (and other frameworks). It provides:

• Free hosting: For hobby projects
• Automatic deployments: From Git
• Environment variables: Secure configuration
• Global CDN: Fast worldwide
• HTTPS: Automatic SSL certificates

Why Deploy?

Deploying makes your app:

• Publicly accessible: Share it with others
• Always online: No need to run your local server
• Production-ready: See how it performs in the real world

I'm at step 10: Optional: Deploy to Vercel.

Help me:
1. Push my code to GitHub (if not already)
2. Connect my repo to Vercel
3. Set environment variables in Vercel
4. Deploy and verify it works

Provide step-by-step instructions for Vercel deployment.

Update the internal implementation plan with notes and show me the plan so I can track your progress.

Troubleshooting

Q: Build fails on Vercel. A: Check the build logs. Common issues:

• Missing dependencies (check package.json)
• TypeScript errors (run npm run typecheck locally first)
• Environment variable errors (make sure they're set)

Q: My app works locally but not on Vercel. A: Check:

• Environment variables are set correctly
• The build completed successfully
• Check Vercel's function logs for runtime errors

Q: Can I use a different private key for production? A: Yes! In fact, it's recommended. Generate a new wallet for production and only fund it with what you need. Never use your main wallet's private key.

Q: How do I update my deployment? A: Just push to your Git repository. Vercel will automatically deploy new commits. You can also trigger manual deployments from the Vercel dashboard.

Q: Is Vercel free? A: Yes, for hobby projects. The free tier includes:

• Unlimited deployments
• 100GB bandwidth/month
• Serverless functions
• Automatic HTTPS

Q: Can I deploy to other platforms? A: Yes! Next.js apps can be deployed to:

• Netlify
• Railway
• Render
• AWS Amplify
• Your own server (with npm run build && npm start)

Q: How do I see logs from production? A: In Vercel dashboard, go to your project → "Functions" tab → Click on a function to see logs. Or use the "Logs" section in the deployment view.