BPO Directory Website with Next.js, Supabase and Three.js
BPOAI is a directory and intelligence hub for BPO companies in the Philippines. It pairs a searchable Supabase data layer with a 3D landing page, so finding an outsourcing partner does not feel like reading a phone book.
By Wasif Rehman · · Web development
In short
- A solid Supabase schema, built for filtering by services, locations, sizes and specialties, makes directory data trustworthy and searchable.
- A heavy 3D landing has to be scoped and lazy-loaded so it does not wreck load time or Core Web Vitals.
- For B2B buyers making a high-trust decision, polish reads as credibility.
- Discovery is only half the job: Resend turns interest into a lead in the team's inbox.
- OpenNext runs Next.js on Cloudflare, but you have to be deliberate about which Node APIs you use.
Why BPO buyers need a better directory website
The Business Process Outsourcing market in the Philippines is big, but discovering the right provider still means wading through outdated lists and SEO spam.
BPOAI, which I led at AIDEVGEN, is a directory and intelligence hub that pairs real company data with a landing experience that doesn't feel like a phone book. Here is how it is put together.
| Layer | Tool | Job |
|---|---|---|
| Data and auth | Supabase: Postgres plus @supabase/ssr | Company data, read securely from server components |
| Landing | react-three-fiber over Three.js | An animated 3D hero |
| Motion | Framer Motion | Page changes, card reveals and micro-interactions |
| Lead capture | Resend | Demo-request and contact emails |
| Hosting | Cloudflare via @opennextjs/cloudflare | Runs the Next.js 16 app on Cloudflare's runtime |
This post covers the directory site. The AI agent server that runs behind it has its own write-up.
Supabase as the data layer for a searchable directory
The directory runs on Supabase: Postgres for the company data, plus the SSR auth helpers in @supabase/ssr so server components can read data securely.
Modeling the schema for flexible search was the core work. Each company has:
- Services
- Locations
- Sizes
- Specialties
Adding a Three.js 3D hero without wrecking load time
First impressions matter for a directory that wants to be the default. The landing page uses react-three-fiber over Three.js for an animated 3D hero that sets BPOAI apart from a generic listing site.
So the 3D experience is:
- Scoped
- Lazy-loaded
- Tuned to stay smooth on mid-range hardware
Framer Motion as a credibility feature on a B2B site
Framer Motion handles transitions throughout the site: page changes, card reveals and micro-interactions.
Lead capture with Resend in a Next.js directory
Discovery is only half the job. The product has to convert interest into contact.
- Interested visitor
- Demo request or contact form
- Email via Resend
- Lead in the team's inbox
Demo-request and contact flows are delivered by email via Resend, so an interested visitor becomes a real lead in the team's inbox without any third-party form middleware.
Deploying Next.js 16 to Cloudflare with OpenNext
BPOAI deploys to Cloudflare using @opennextjs/cloudflare, which adapts a Next.js 16 app to Cloudflare's runtime. That suits a directory accessed from around the world, because edge distribution keeps the site fast for visitors wherever they are.
Put together, a solid Supabase schema makes the data trustworthy and searchable, a restrained 3D landing and Framer Motion make it memorable, and Resend turns browsing into pipeline. Combine those and a listing site becomes a product.
Frequently asked questions
How do you build a directory website with Supabase?
In BPOAI, Postgres on Supabase holds the company data and @supabase/ssr lets server components read it securely. Most of the work is modeling the schema so services, locations, sizes and specialties can be filtered quickly, backed by Postgres indexes.
Can you deploy a Next.js app to Cloudflare?
Yes. BPOAI runs a Next.js 16 app on Cloudflare using @opennextjs/cloudflare. The runtime is not a standard Node server, so you need to be careful about which Node APIs you use.
Does a 3D landing page hurt Core Web Vitals?
It can. A heavy 3D scene can wreck load time, so on BPOAI the react-three-fiber hero is scoped, lazy-loaded and tuned to stay smooth on mid-range hardware.
How does BPOAI capture leads?
Demo-request and contact forms send email through Resend, so an interested visitor becomes a lead in the team's inbox without third-party form middleware.
Case study: BPOAI