Next.js 15 From Scratch

What is Vercel?

Vercel is the company behind Next.js and the best hosting platform for Next.js apps. The free plan includes:

• Unlimited personal projects
• 100 GB bandwidth/month
• Automatic HTTPS
• Global CDN
• GitHub integration (auto-deploys on every push)

Step 1: Push to GitHub

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

Step 2: Connect to Vercel

1. Go to vercel.com and sign in with GitHub
2. Click "New Project"
3. Select your GitHub repo
4. Click "Deploy"

Your project will be live in a few minutes! 🎉

Environment Variables

# .env.local (never commit to Git!)
DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="your-secret"
STRIPE_SECRET_KEY="sk_live_..."
NEXT_PUBLIC_API_URL="https://api.yourdomain.com"

Automatic Preview Deployments

Every GitHub pull request automatically gets a unique preview URL from Vercel. Test your changes before merging to production.

Custom Domain

1. Vercel dashboard → your project → Settings → Domains
2. Add your domain (e.g. my-site.com)
3. Add the CNAME record Vercel shows you in your DNS provider