Vercel Deployment Guide - نظام إدارة المواقف الذكي
🚀 Quick Deploy to Vercel
Option 1: Deploy via Vercel Dashboard (Recommended)
- Go to Vercel
- Import Repository
- Click “Add New…” → “Project”
- Select the
husam05/car-smart-park repository
- Click “Import”
- Configure Project
- Framework Preset: Next.js (auto-detected)
- Root Directory:
./ (leave as default)
- Build Command:
npm run build (auto-detected)
- Output Directory:
.next (auto-detected)
- Install Command:
npm install (auto-detected)
- Environment Variables (Optional)
- Add any Firebase or custom environment variables if needed
- Example:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
- Deploy
- Click “Deploy”
- Wait 2-3 minutes for the build to complete
- Your app will be live at:
https://car-smart-park.vercel.app
Option 2: Deploy via Vercel CLI
# Install Vercel CLI globally
npm install -g vercel
# Navigate to project directory
cd car-smart-park
# Login to Vercel
vercel login
# Deploy to production
vercel --prod
🔧 Configuration Files
vercel.json
The project includes a vercel.json file with optimal settings:
- Framework: Next.js
- Region: US East (iad1) - fastest for most users
- Build command:
npm run build
next.config.ts
The Next.js configuration automatically detects the deployment environment:
- Vercel: Uses SSR mode (Server-Side Rendering)
- GitHub Pages: Uses static export with basePath
- Local Development: Standard Next.js dev mode
🌐 Deployment URLs
After deployment, your app will be available at:
- Production:
https://car-smart-park.vercel.app
- Preview Deployments: Automatic preview URLs for each pull request
- GitHub Pages:
https://husam05.github.io/car-smart-park/ (existing)
🔄 Automatic Deployments
Vercel automatically deploys:
- Production: Every push to
main branch
- Preview: Every pull request gets a unique preview URL
📊 Features on Vercel
✅ Server-Side Rendering (SSR) - Faster initial page loads
✅ Automatic HTTPS - Free SSL certificates
✅ Global CDN - Fast worldwide access
✅ Analytics - Built-in performance monitoring
✅ Preview Deployments - Test changes before merging
✅ Instant Rollbacks - Revert to previous versions easily
🆚 Vercel vs GitHub Pages
| Feature |
Vercel |
GitHub Pages |
| Rendering |
SSR + Static |
Static only |
| Build Time |
~2-3 min |
~3-5 min |
| Custom Domain |
Free |
Free |
| Analytics |
Built-in |
Manual setup |
| Preview URLs |
Automatic |
Manual |
| API Routes |
✅ Supported |
❌ Not supported |
| Edge Functions |
✅ Supported |
❌ Not supported |
🔐 Custom Domain Setup
To use car-smart-park.vercel.app:
- Go to Project Settings → Domains
- The default
*.vercel.app domain is automatically assigned
- For custom domains:
- Add your domain (e.g.,
parkingsystem.com)
- Update DNS records as instructed
- Vercel handles SSL automatically
🐛 Troubleshooting
Build Fails
# Check build logs in Vercel dashboard
# Or test locally:
npm run build
Environment Variables Missing
- Add them in Project Settings → Environment Variables
- Redeploy after adding variables
404 Errors
- Ensure
next.config.ts doesn’t have basePath for Vercel
- The config file automatically handles this
Slow Build Times
- Check if
node_modules is being cached
- Vercel automatically caches dependencies
📱 Testing Locally with Vercel Environment
# Install Vercel CLI
npm install -g vercel
# Run local development with Vercel environment
vercel dev
# This simulates the Vercel production environment locally
🎯 Next Steps After Deployment
- Verify Deployment
- Visit
https://car-smart-park.vercel.app
- Test all features (parking map, simulation, gates, etc.)
- Set Up Analytics
- Enable Vercel Analytics in Project Settings
- Monitor performance and user behavior
- Configure Monitoring
- Set up error tracking (optional)
- Configure uptime monitoring
- Update Repository
- Add Vercel deployment badge to README
- Update documentation with Vercel URL
📚 Additional Resources
✅ Deployment Checklist
Need Help? Check the Vercel Support or review the build logs in your Vercel dashboard.