⚡ Try the Pages Function
Type a name and call /api/greet — a serverless function running on Cloudflare's edge, defined in just a few lines of code.
// Response from /api/greet will appear here…
🛢️ Real database lookup — D1
A live example of the dynamic route. Search the catalog (/api/products?q=), then click a product — that calls /api/products/<id>, where the id from the URL drives a real SQL query against a Cloudflare D1 database.
// Click a product above to GET /api/products/<id> …
🧱 How this page is built
Two layers, one deployment — no servers, no regions, no config.
Static · cached at edge
public/index.html
public/_headers
public/_redirects
Served instantly from 330+ cities. Free, unmetered.
Serverless · Pages Functions
functions/_middleware.ts
functions/api/greet.ts
functions/api/products/index.ts
functions/api/products/[id].ts
File-based routing on the Workers runtime, querying D1.
📁 The whole project
That's it. This is the complete source for everything you see.
pages-demo/
├─ functions/ # serverless code (edge)
│ ├─ _middleware.ts # adds headers to every response
│ └─ api/
│ ├─ greet.ts # GET /api/greet?name=…
│ └─ products/
│ ├─ index.ts # GET /api/products (list + ?q=search)
│ └─ [id].ts # GET /api/products/:id (D1 lookup)
├─ public/ # static assets (cached)
│ ├─ index.html
│ ├─ _headers
│ └─ _redirects
├─ schema.sql # D1 table + seed data
└─ wrangler.jsonc # project config + D1 binding
🚀 Deploy it yourself
From this folder to a global URL in three commands.
- Preview locally on the real edge runtime
npx wrangler pages dev ./public - Deploy to Cloudflare's global network
npx wrangler pages deploy ./public --project-name=pages-demo - Share your live URL — done.
https://pages-demo.pages.dev
Built as a companion to the Cloudflare Pages guide · static assets + Pages Functions in a single deployment.