The Next.js frontend (apps/web) deploys to Vercel. It auto-deploys on every push to main and creates preview URLs for pull requests.
Prerequisites
- A Vercel account
- The folksbase repository connected to Vercel
- All external services configured (Supabase, Neon, etc.)
Step-by-Step Setup
1. Import the Repository
- Go to vercel.com/new
- Import your folksbase GitHub repository
- Vercel will auto-detect it as a monorepo
Set the following in your Vercel project settings:
| Setting | Value |
|---|
| Framework Preset | Next.js |
| Root Directory | apps/web |
| Build Command | pnpm build (Turborepo handles the rest) |
| Output Directory | .next |
| Node.js Version | 24.x |
3. Set Environment Variables
Add these in the Vercel dashboard under Settings → Environment Variables:
| Variable | Example Value |
|---|
NEXT_PUBLIC_API_URL | https://your-api.onrender.com/api |
NEXT_PUBLIC_SUPABASE_URL | https://your-project.supabase.co |
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY | Your Supabase anon key |
These are NEXT_PUBLIC_ variables — they’re embedded in the client bundle at build time. Changing them requires a redeploy.
4. Deploy
Push to main or click “Deploy” in the Vercel dashboard. The first build takes a few minutes as it installs all monorepo dependencies.
Preview Deployments
Every pull request automatically gets a unique preview URL. This is where Playwright E2E tests run in CI — the PLAYWRIGHT_BASE_URL is set to the preview URL.
Preview deployments use the same environment variables as production unless you configure environment-specific overrides in Vercel.
Monorepo Configuration
Vercel needs to know which app to build. The root directory setting (apps/web) tells Vercel to scope the build to the web app, but Turborepo’s dependency graph ensures shared packages (@folksbase/db, @folksbase/types) are built first.
If you’re using Vercel’s monorepo support, make sure the Ignored Build Step is not filtering out changes to packages/ — those affect the web app too.
Rollback
If a deployment breaks production:
- Go to the Deployments tab in your Vercel project
- Find the last working deployment
- Click the three-dot menu → Promote to Production
This is instant — no rebuild required.
Custom Domain
- Go to Settings → Domains in your Vercel project
- Add your domain (e.g.,
folksbase.joselito.dev)
- Configure DNS as instructed by Vercel (CNAME or A record)
- SSL is provisioned automatically
