Minimum set of changes to make bindings work locally

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# wrangler
+.wrangler

next.config.js

@@ -2,3 +2,17 @@
 const nextConfig = {}
 
 module.exports = nextConfig
+
+// Everything below *needs* to be part of the default template that running npm create cloudflare@latest gives you
+// It needs to be documented in real dev docs
+// It needs to be the happy path, not optional thing you discover later
+// Assume that every single developer will use one or more of these in their app
+if (process.env.NODE_ENV === 'development') {
+    import('@cloudflare/next-on-pages/__experimental__next-dev').then(({ setupDevBindings }) => {
+
+        // When Pages has wrangler.toml, just read from that in current directory and can skip this config
+        setupDevBindings({
+            kvNamespaces: ['MY_KV_1', 'MY_KV_2'],
+        });
+    });
+}

package.json

@@ -18,11 +18,12 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@cloudflare/next-on-pages": "^1.8.2",
+    "@cloudflare/next-on-pages": "^0.0.0-2b5c8f2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "miniflare": "^3.20231030.4",
     "typescript": "^5",
     "vercel": "^33.0.1"
   }
-}
+}

src/app/api/hello/route.ts

@@ -6,5 +6,9 @@ import type { NextRequest } from 'next/server'
 export const runtime = 'edge'
 
 export async function GET(request: NextRequest) {
-  return new Response(JSON.stringify({ name: 'John Doe' }))
+  const myKv = process.env['MY_KV_1'];
+  await myKv.put('foo', 'bar');
+  const valueFromKv = await myKv.get('foo');
+
+  return new Response(JSON.stringify({ name: valueFromKv }))
 }