feat: adapt the middleware example for cloudflare

Author: vicb

examples/middleware/app/middleware/page.tsx

@@ -0,0 +1,3 @@
+export default function MiddlewarePage() {
+  return <h1>Via middleware</h1>;
+}

examples/middleware/app/page.tsx

@@ -13,6 +13,9 @@ export default function Home() {
       <p>
         <Link href="/about2">Go to about 2 page (no redirect or rewrite)</Link>
       </p>
+      <p>
+        <Link href="/middleware">Go to middleware page (using NextResponse.next())</Link>
+      </p>
     </div>
   );
 }

examples/middleware/middleware.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 
 export function middleware(request: NextRequest) {
+  console.log("middleware");
   if (request.nextUrl.pathname === "/about") {
     return NextResponse.redirect(new URL("/redirected", request.url));
   }
@@ -11,5 +12,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/about/:path*", "/another/:path*"],
+  matcher: ["/about/:path*", "/another/:path*", "/middleware/:path*"],
 };

examples/middleware/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/middleware/open-next.config.ts

@@ -0,0 +1,15 @@
+import type { OpenNextConfig } from "@opennextjs/aws/types/open-next";
+
+const config: OpenNextConfig = {
+  default: {},
+
+  middleware: {
+    external: true,
+    override: {
+      wrapper: "cloudflare",
+      converter: "edge",
+    },
+  },
+};
+
+export default config;

examples/middleware/package.json

@@ -1,22 +1,27 @@
 {
+  "name": "middleware",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "build:worker": "pnpm cloudflare",
+    "dev:worker": "wrangler dev --port 8770 --inspector-port 9330",
+    "preview:worker": "pnpm build:worker && pnpm dev:worker"
   },
   "dependencies": {
-    "next": "latest",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "next": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@opennextjs/cloudflare": "workspace:*",
     "@types/node": "18.0.0",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.0.5",
-    "eslint": "8.18.0",
-    "eslint-config-next": "12.2.0",
-    "typescript": "4.7.4"
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "eslint": "catalog:",
+    "typescript": "catalog:",
+    "wrangler": "catalog:"
   }
 }

examples/middleware/tsconfig.json

@@ -21,5 +21,5 @@
     ]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "open-next.config.ts"]
 }

examples/middleware/wrangler.toml

@@ -6,4 +6,4 @@ compatibility_date = "2024-09-23"
 compatibility_flags = ["nodejs_compat"]
 
 # Use the new Workers + Assets to host the static frontend files
-assets = { directory = ".open-next/assets", binding = "ASSETS" }
+assets = { directory = ".open-next/assets", binding = "ASSETS" }