Vercel & GitHub Automated Deployment

Vercel is the creator of Next.js and one of the most popular frontend hosting platforms. The core experience of Vercel is its seamless integration with GitHub: Import, Config, Deploy.

Frontend Hosting

Why Choose Vercel?

• Best Partner for Next.js: Best support for Next.js SSR and ISR features.
• Deploy Previews: Whenever you submit a Pull Request, Vercel automatically deploys to a temporary URL and displays the link directly in the PR comments, greatly improving team Code Review efficiency.
• Global Edge Network: Similar to Cloudflare, extremely fast.

Integration Steps

1. Registration and Association

1. Visit Vercel.com.
2. Recommend using Continue with GitHub to register/log in. This automatically completes account association.

2. Import Project

1. Click Add New... -> Project in the Vercel Dashboard.
2. In the "Import Git Repository" area, you will see all repositories under your GitHub account.
3. Click the Import button next to the target repository.

3. Configure Project

Vercel is extremely smart; it automatically analyzes your code structure.

• Framework Preset: If it detects next.config.js, it automatically selects Next.js; if vite.config.ts, it selects Vite. Usually no manual modification needed.
• Root Directory: If your frontend code is in a subdirectory of a Monorepo (e.g., /packages/web), click Edit here to modify.
• Environment Variables: Enter environment variables needed for production here (e.g., API address, Secret Key).

4. Deploy

Click the Deploy button. Vercel will immediately start building. For most modern frontend frameworks, build time is usually between 30 seconds to 2 minutes. After a successful build, you will see a confetti effect 🎉 and receive a permanent domain https://your-project.vercel.app.

Daily Usage Flow

After integration, your development flow becomes very smooth:

1. Develop: Write code locally, pass tests.
2. Commit: git push origin main.
3. Go Live: Do nothing! Vercel listens to the push and automatically starts building. 1 minute later, the online version updates automatically.

PR Preview Mode (Key Feature)

This is one of Vercel's most powerful features.

1. Create a new branch: git checkout -b feature-new-ui.
2. Modify code and Push.
3. Initiate a Pull Request on GitHub to merge into main.
4. Magic happens: Vercel automatically comments a deployment status Bot under this PR.
5. Click Visit Preview to see an instant demo version of this new feature.
6. This version is completely isolated from the online production environment, allowing you to send it to colleagues for confirmation.
7. After confirmation, merge the PR, and the production environment automatically updates.