Overview
Vercel is the platform behind Next.js, optimized for frontend frameworks and full-stack applications. Connect your Vercel account to deploy directly from VibeHub.Prerequisites
Before connecting:- A Vercel account (free tier works)
- Owner access to your VibeHub project
Connecting Your Vercel Account
1
Open VibeHub Settings
Click your profile icon and go to Settings
2
Find Connected Platforms
Scroll to the Connected Platforms section
3
Click Connect for Vercel
Click the Connect button next to Vercel
4
Authorize in Vercel
You’ll be redirected to Vercel. Log in and authorize VibeHub to access your account.
5
Return to VibeHub
After authorization, you’ll be redirected back. Vercel is now connected!
Configuring a Project for Vercel
After connecting your account, configure each project:1
Open Project Settings
Go to your project and click the Settings tab
2
Find Deployment Section
Scroll to the Deployment section
3
Select Vercel
Choose Vercel as your deployment platform
4
Choose a Project
Select an existing Vercel project or create a new one
5
Save Configuration
Click Save to store your deployment settings
Creating a New Vercel Project
If you don’t have an existing project:- In the project selection, click Create New Project
- Enter a name for your project
- Click Create
- The new project is automatically selected
your-project.vercel.app.
Deploying to Vercel
Once configured, deploying is simple:- Go to your project dashboard
- Click the Deploy button
- Watch the deployment progress
- Click the URL to view your live site
Framework Detection
Vercel automatically detects common frameworks:| Framework | Auto-Detected |
|---|---|
| Next.js | Yes |
| React (CRA) | Yes |
| Vue.js | Yes |
| Nuxt | Yes |
| Svelte | Yes |
| Static HTML | Yes |
Vercel’s build system automatically configures settings for detected frameworks. For custom setups, configure build settings in the Vercel dashboard.
Deployment Settings
| Setting | Description |
|---|---|
| Project | Which Vercel project to deploy to |
| Build Command | Override the auto-detected build command |
| Output Directory | Override the auto-detected output folder |
Viewing Deployment Status
After deploying, you’ll see:- Status - Building, Deploying, Ready, or Error
- URL - Link to your deployed site
- Deploy Time - When the deployment completed
Vercel Features Available
When deploying via VibeHub, you get access to:- Preview URLs - Unique URLs for each deployment
- Edge Network - Global CDN for fast delivery
- Serverless Functions - API routes work automatically
- Environment Variables - Configure in Vercel dashboard
Troubleshooting
Authorization Failed
If the OAuth flow fails:- Make sure you’re logged into Vercel
- Clear your browser cookies
- Try connecting again
Deployment Failed
If a deployment fails:- Check the Vercel dashboard for build logs
- Verify your framework is supported
- Check for missing dependencies
- Review environment variables
Project Not Appearing
If your Vercel projects don’t show up:- Verify Vercel is connected in Settings
- Check that you have projects in your Vercel account
- Ensure you authorized the correct Vercel team/account
- Try disconnecting and reconnecting
Disconnecting Vercel
To disconnect your Vercel account:- Go to VibeHub Settings
- Find Connected Platforms
- Click Disconnect next to Vercel