Integrate Vercel Preview Deployments in CI Workflow

[aniket866]

Description

• Enabled Vercel PR previews via Vercel GitHub integration (auto-deployed on each PR with link attached).

• Removed GitHub Pages–based PR previews to avoid duplication and failures.

Thankyou so much

Summary by CodeRabbit

• New Features
  • Automated preview deployments for pull requests to GitHub Pages and Vercel.
  • Automatic posting of preview URLs in pull request comments for quick access.
  • Automatic cleanup of preview deployments when pull requests are closed.
  • Configurable base path support for deployments to enable flexible preview routing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds two GitHub Actions workflows to automate PR preview deployments—one for GitHub Pages with built-in cleanup on PR closure, another for Vercel with inline deployment comments. Also extends Next.js configuration to support dynamic base paths via the BASE_PATH environment variable.

Changes

Cohort / File(s)	Summary
GitHub Pages PR Preview ​.github/workflows/pr-preview.yml	New PR-triggered workflow: builds with Node.js, sets BASE_PATH from repo/PR, outputs to preview/pr-<number>, deploys to gh-pages (preserving other content), posts a PR comment with the preview URL; on PR close removes the preview folder.
Vercel Preview Deployment ​.github/workflows/vercel-preview.yml	New PR-triggered workflow: installs Vercel CLI, retrieves env via token, builds and deploys prebuilt artifacts to Vercel, captures deployment URL as step output, and posts a PR comment with the preview URL.
Next.js config next.config.ts	Adds `const basePath = process.env.BASE_PATH

Sequence Diagrams

sequenceDiagram
    participant GH as GitHub (PR Event)
    participant Actions as GitHub Actions
    participant Runner as Node Build Runner
    participant Pages as GitHub Pages
    participant API as GitHub API

    GH->>Actions: PR opened / updated
    Actions->>Runner: checkout, setup Node, npm install
    Runner->>Runner: build with BASE_PATH
    Runner->>Pages: copy to preview/pr-<N> & publish
    Pages-->>Pages: merge/preserve existing gh-pages content
    Actions->>API: post PR comment with preview URL

Loading

sequenceDiagram
    participant GH as GitHub (PR Event)
    participant Actions as GitHub Actions
    participant VercelCLI as Vercel CLI
    participant Vercel as Vercel Platform
    participant API as GitHub API

    GH->>Actions: PR opened / updated
    Actions->>VercelCLI: install & pull env (using token)
    VercelCLI->>Vercel: build artifacts / deploy prebuilt
    Vercel-->>VercelCLI: return deployment URL
    Actions->>API: post PR comment with preview URL

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• CI/CD-workflow-setup #13 — Adds GitHub Actions workflows for building/deploying a Next.js site to GitHub Pages; closely related to the PR Pages workflow here.

Poem

🐰 I nudge the CI, a soft deploy,

Previews bloom for every buoyed PR joy,
Pages sparkle, Vercel hums anew,
basePath tucked in an envy hue,
Hooray — a rabbit hops the deployment view!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding Vercel Preview Deployments to the CI workflow. It directly reflects the primary addition in vercel-preview.yml and related configuration changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @.github/workflows/vercel-preview.yml:
- Around line 1-8: Add explicit GITHUB_TOKEN permissions to the workflow by
adding a permissions block that grants at minimum issues: write so the
thollander/actions-comment-pull-request@v2 step can post comments; update the
top-level workflow (name: Vercel Preview Deployment) to include permissions: {
issues: write } and, if you must comment on PRs from forks, consider switching
the trigger to pull_request_target or using a PAT stored in secrets and
referenced by the commenting step (ensure you update the step using
thollander/actions-comment-pull-request@v2 accordingly).

[KanishkSogani]

Hey @aniket866, you mentioned three things in one place - VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID but later you only mentioned VERCEL_ORG_ID and VERCEL_PROJECT_ID.

Could you please confirm which secrets actually need to be added? Also, I checked my Vercel account settings and I can only find the User ID there, nothing else.

[aniket866]

hi @KanishkSogani you were right , I by-mistake added vercel configuration for the Production level but since we are in development phase we don't require any token or project -Id ( these are required when project for production level not in dev phase).

I have corrected the implementation , Now one thing you have to do just deploy this reop in your vercel and all set !

sorry for the mistake

[KanishkSogani]

Ok @aniket866 but if I deploy this repo on Vercel, won’t we get link previews only after the PR is merged, not when the PR is created?

[aniket866]

Ok @aniket866 but if I deploy this repo on Vercel, won’t we get link previews only after the PR is merged, not when the PR is created?

I think it is configured to build ,it should work, let's see if it won't work
I just need to fix next.yml file other things will remain same. We can check after this PR merged because I am not also sure about this.
Thankyou