earth-and-home-nextjs-cf

tigawanna/earth-and-home-nextjs-cf

Site GitHub

A modern real estate platform built with Next.js, PocketBase, and deployed on Cloudflare Workers using OpenNext.

cloudflare-workers
nextjs
opennext
better-auth
r2

Earth & Home - Real Estate Platform

A modern real estate platform built with Next.js and deployed on Cloudflare Workers.

Live demo: earth-and-home-nextjs.denniskinuthiaw.workers.dev

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack, React Compiler)
Language	TypeScript (strict)
UI	Tailwind CSS v4 + DaisyUI v5 + shadcn/ui
Database	Cloudflare D1 (SQLite) via Drizzle ORM
Auth	Better Auth (Google OAuth)
Storage	Cloudflare R2 (media) + Cloudflare Images
Cache	R2 Incremental Cache with Regional Cache
State	TanStack Query
Deployment	Cloudflare Workers via OpenNext

Prerequisites

Node.js 20+
pnpm
Wrangler CLI (pnpm add -g wrangler)
Cloudflare account (authenticated via wrangler login)

Getting Started

1. Install dependencies

bash

1pnpm install

2. Configure environment variables

Create a .env file:

bash

1NODE_ENV=development
2BETTER_AUTH_URL=http://localhost:3010
3NEXT_PUBLIC_BETTER_AUTH_URL=http://localhost:3010
4BETTER_AUTH_SECRET=<generate-a-random-secret>
5GOOGLE_CLIENT_ID=<your-google-oauth-client-id>
6GOOGLE_CLIENT_SECRET=<your-google-oauth-client-secret>

3. Set up the local D1 database

bash

1pnpm db:migrate:local

4. Start the dev server

bash

1pnpm dev

Open http://localhost:3010.

Scripts

Development

Script	Description
`pnpm dev`	Start dev server (Turbopack, port 3010). Runs local D1 migrations automatically.
`pnpm build`	Production build
`pnpm lint`	Lint with oxlint
`pnpm format`	Format with oxfmt

Database

Script	Description
`pnpm db:generate`	Generate Drizzle migration files from schema changes
`pnpm db:migrate:local`	Apply migrations to local D1
`pnpm db:migrate:remote`	Apply migrations to production D1
`pnpm db:studio`	Open Drizzle Studio for local DB
`pnpm auth:generate`	Regenerate Better Auth schema after plugin changes

Deployment

Script	Description
`pnpm run preview`	Build and preview locally in Workers runtime
`pnpm run deploy`	Build and deploy to Cloudflare Workers
`pnpm run upload`	Build and upload without making live
`pnpm run cf-typegen`	Generate `cloudflare-env.d.ts` types

Analysis

Script	Description
`pnpm run analyze`	Bundle size analysis
`pnpm run lighthouse`	Lighthouse audit against localhost

Deployment

Cloudflare Resources

The app requires these Cloudflare resources (configured in wrangler.jsonc):

Resource	Binding	Name
D1 Database	`DB`	`earth-and-home-db`
R2 Bucket (cache)	`NEXT_INC_CACHE_R2_BUCKET`	`earth-and-home-nextjs-opennext-cache`
R2 Bucket (media)	`MEDIA`	`earth-and-home-media`
Cloudflare Images	`IMAGES`	—
Worker Self-Reference

Create them if deploying to your own account:

bash

1wrangler d1 create earth-and-home-db
2wrangler r2 bucket create earth-and-home-nextjs-opennext-cache
3wrangler r2 bucket create earth-and-home-media

Update the database_id in wrangler.jsonc with the ID returned by the D1 create command.

Environment Variables

Build-time public variables go in .env.production:

bash

1NEXT_PUBLIC_BETTER_AUTH_URL=https://your-worker.workers.dev

NEXT_PUBLIC_* variables are inlined at build time by Next.js. They do not work as Cloudflare runtime secrets.

Runtime secrets are set via Wrangler CLI:

bash

1wrangler secret put BETTER_AUTH_SECRET
2wrangler secret put BETTER_AUTH_URL
3wrangler secret put GOOGLE_CLIENT_ID
4wrangler secret put GOOGLE_CLIENT_SECRET

Deploy

bash

1# Apply any pending D1 migrations to production
2pnpm db:migrate:remote
3
4# Build and deploy
5pnpm run deploy

The deploy script automatically stubs the @vercel/og WASM file (~2 MB) to stay within the 3 MB Worker size limit, then restores it after upload.

Custom Domains

Cloudflare Dashboard → Workers & Pages → Your Worker → Settings → Domains & Routes
Add a custom domain or route
Update NEXT_PUBLIC_BETTER_AUTH_URL in .env.production and BETTER_AUTH_URL secret to match

Project Structure

typescript

1├── drizzle/                    # D1 migration files
2├── scripts/
3│   ├── set-production-secrets.js   # Bulk secret management
4│   ├── list-production-secrets.js  # List configured secrets
5│   └── stub-resvg-wasm.sh         # WASM stub for bundle size
6├── src/
7│   ├── app/                    # Next.js App Router pages & API routes
8│   ├── components/
9│   │   ├── common/             # Reusable UI components
10│   │   ├── dashboard/          # Dashboard feature components
11│   │   ├── theme/              # Theme provider & toggle
12│   │   └── ui/                 # shadcn/ui primitives
13│   ├── config/                 # Site configuration
14│   ├── data-access-layer/      # Server-side data fetching
15│   ├── db/
16│   │   └── schema/             # Drizzle schema definitions
17│   ├── hooks/                  # React hooks
18│   ├── lib/
19│   │   ├── auth/               # Better Auth client & server
20│   │   ├── db/                 # D1 database connection
21│   │   └── tanstack/           # TanStack Query setup
22│   ├── services/               # Domain-specific API services
23│   └── types/                  # TypeScript type definitions
24├── middleware.ts                # Edge middleware (auth guard)
25├── open-next.config.ts         # OpenNext caching config
26├── wrangler.jsonc              # Cloudflare Worker config
27└── drizzle.config.ts           # Drizzle Kit config (local D1)

Caching

The app uses R2 Incremental Cache with Regional Cache (open-next.config.ts):

Long-lived mode: ISR/SSG responses cached for u

…(truncated)