Build a Team Task Manager · Part 6

Deploy to Cloudflare Pages

Published 2026-06-12

What you'll build

In this final part you'll take the task manager from a local dev server to a live Cloudflare Pages deployment — with edge rendering, environment variables configured securely, and an optional custom domain.

Cloudflare Pages runs your Next.js app at the edge globally, which means pages load fast for users in Accra, Lagos, Nairobi, and anywhere else — without configuring servers or regions.

Prerequisites

Parts 1–5 completed — you have a working Next.js 14 app with Firebase Auth, Supabase, real-time updates, and RLS
A Cloudflare account — free tier is sufficient. Sign up at cloudflare.com if you don't have one

Install the Cloudflare Next.js adapter

Cloudflare Pages uses Workers under the hood. Next.js needs an adapter to run on Workers instead of Node.js:

npm install --save-dev @cloudflare/next-on-pages
npx @cloudflare/next-on-pages@1 init

The init command creates a wrangler.toml file and updates your package.json build scripts.

Configure the project

BlocWeave prompt

Configure this Next.js 14 app for Cloudflare Pages deployment using @cloudflare/next-on-pages. 1. Update next.config.ts to set the edge runtime for all routes — add export const runtime = "edge" to the root layout and all page files that use server components 2. Create wrangler.toml with name = "task-manager", compatibility_date = "2024-01-01", compatibility_flags = ["nodejs_compat"], and pages_build_output_dir = ".vercel/output/static" 3. Update package.json: add a "pages:build" script running "npx @cloudflare/next-on-pages" and update the "build" script to run "pages:build" after the Next.js build 4. Create .dev.vars with placeholder values for all environment variables so local Cloudflare dev works List any routes or features that don't support the edge runtime so I can handle them.

Add environment variables to Cloudflare

Environment variables set in .env.local aren't available in Cloudflare's build environment. Add them in the Cloudflare dashboard:

Go to Workers & Pages → your project → Settings → Environment Variables
Add each variable from .env.local:
- NEXT_PUBLIC_FIREBASE_API_KEY
- NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
- NEXT_PUBLIC_FIREBASE_PROJECT_ID
- NEXT_PUBLIC_FIREBASE_APP_ID
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
Set environment to Production for live values
Add a parallel set under Preview for staging values if you want a separate preview environment

Keep secrets secret. SUPABASE_SERVICE_ROLE_KEY should never be exposed even in Cloudflare's encrypted variable storage if you're no longer using it server-side. After the RLS migration in Part 5, the anon key is enough — the service role key can be omitted entirely.

Connect the GitHub repository

The easiest way to deploy is to connect your GitHub repo so Cloudflare deploys automatically on every push:

In Cloudflare dashboard, go to Workers & Pages → Create → Pages → Connect to Git
Choose your repository
Set Build command: npm run build
Set Build output directory: .vercel/output/static
Click Save and Deploy

Cloudflare will run the build and give you a URL like task-manager.pages.dev within a couple of minutes.

Test the deployment

Once the build completes, open the Pages URL and walk through the full flow:

Sign in with email/password
Create a task
Open the URL in a second browser tab — the task should appear in real-time
Sign out and confirm you're redirected to /login
Try navigating directly to /dashboard without being signed in — middleware should redirect you

If anything fails, check Workers & Pages → your project → Deployments → View build log for the error.

Add a custom domain

If you have a domain registered on Cloudflare:

Go to Workers & Pages → your project → Custom domains
Click Set up a custom domain
Enter your domain (e.g. tasks.yourdomain.com)
Cloudflare automatically creates the DNS record — no manual configuration

If your domain is registered elsewhere, add a CNAME record pointing to task-manager.pages.dev at your registrar.

Set up preview deployments

Cloudflare Pages automatically creates preview deployments for every pull request. To test a change before merging:

Create a new branch: git checkout -b feature/your-change
Make your change and push: git push origin feature/your-change
Open a PR on GitHub
Cloudflare will comment on the PR with a unique preview URL

This means you can share a working preview of a new feature before it goes live — useful when working with a team.

You've shipped it

That's the full series. Here's what you built:

Part	What was built
1	Next.js 14 project with TypeScript and Tailwind
2	Firebase Auth — email/password + Google sign-in + route protection
3	Supabase CRUD — tasks table, server actions, dashboard UI
4	Real-time updates — Supabase Realtime subscription, optimistic UI
5	Row Level Security — per-user and per-project policies
6	Cloudflare Pages — edge deployment, env vars, custom domain

Every file in this app was written or scaffolded by BlocWeave from plain-language prompts. The prompts in this series are a starting point — describe your own variations and BlocWeave will adapt.

Where to go from here

Add team invites — email-based invites that add a row to project_members
Add file attachments — Supabase Storage for task attachments
Add Paystack payments — gated features or a subscription plan using Paystack's API
Add notifications — Supabase Edge Functions that send email on task assignment

Install BlocWeave from the VS Code Marketplace and start building.

← Previous All tutorials