feat: configure app for Cloudflare Pages with Next.js runtime

Add @cloudflare/next-on-pages, update configs, and wrangler.toml

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

CLOUDFLARE_DEPLOYMENT.md

@@ -0,0 +1,65 @@
+# Deploying to Cloudflare Pages
+
+This Next.js app is configured to run on Cloudflare Pages with full server-side functionality.
+
+## Prerequisites
+
+1. Install Wrangler CLI globally:
+   \`\`\`bash
+   npm install -g wrangler
+   \`\`\`
+
+2. Login to Cloudflare:
+   \`\`\`bash
+   wrangler login
+   \`\`\`
+
+## Local Development
+
+Run the app locally with Cloudflare Workers simulation:
+\`\`\`bash
+npm run preview
+\`\`\`
+
+## Build for Cloudflare
+
+Build the app for Cloudflare Pages:
+\`\`\`bash
+npm run pages:build
+\`\`\`
+
+This creates a `.vercel/output/static` directory with your built app.
+
+## Deploy to Cloudflare Pages
+
+### Option 1: Command Line Deployment
+
+\`\`\`bash
+npm run deploy
+\`\`\`
+
+### Option 2: Cloudflare Dashboard
+
+1. Go to [Cloudflare Pages](https://dash.cloudflare.com/pages)
+2. Create a new project
+3. Connect your Git repository
+4. Set build settings:
+   - **Build command**: `npm run pages:build`
+   - **Build output directory**: `.vercel/output/static`
+   - **Root directory**: `/`
+
+## Environment Variables
+
+Add these environment variables in Cloudflare Pages dashboard:
+
+- `STRIPE_SECRET_KEY`
+- `STRIPE_PUBLISHABLE_KEY`
+- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`
+- `STRIPE_WEBHOOK_SECRET`
+
+## Important Notes
+
+- API routes run as Cloudflare Workers
+- Stripe webhooks will need to be updated to your Cloudflare Pages URL
+- All server-side features (API routes, dynamic rendering) are fully supported
+- The app uses Edge Runtime for optimal performance on Cloudflare's network

next.config.mjs

@@ -9,6 +9,9 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
+  experimental: {
+    runtime: 'experimental-edge',
+  },
 }
 
-export default nextConfig
+export default nextConfig

package.json

@@ -4,8 +4,11 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "deploy": "npm run pages:build && wrangler pages deploy",
     "dev": "next dev",
     "lint": "next lint",
+    "pages:build": "npx @cloudflare/next-on-pages",
+    "preview": "npm run pages:build && wrangler pages dev",
     "start": "next start"
   },
   "dependencies": {
@@ -48,6 +51,7 @@
     "tw-animate-css": "latest"
   },
   "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.5",
     "@tailwindcss/postcss": "^4.1.9",
     "@types/node": "^22",
     "@types/react": "^19",
@@ -56,6 +60,8 @@
     "eslint-config-next": "15.1.3",
     "postcss": "^8.5",
     "tailwindcss": "^4.1.9",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vercel": "^37.14.0",
+    "wrangler": "^3.94.0"
   }
 }

wrangler.toml

@@ -0,0 +1,6 @@
+name = "alert-bay-trumpeter"
+compatibility_date = "2024-01-01"
+pages_build_output_dir = ".vercel/output/static"
+
+[env.production]
+vars = { NODE_ENV = "production" }