Nextjs 13.4.13+ Fix (#208)

* Fixes Nextjs 13.4.13+ issues (middleware, interception, routing)
---------

Co-authored-by: Dorseuil Nicolas <[email protected]>

Author: khuezy

README.md

@@ -288,19 +288,13 @@ export default async function handler(req, res) {
 If the pages router is in use, you must also invalidate the `_next/data/BUILD_ID/foo.json` path. The value for `BUILD_ID` can be found in the `.next/BUILD_ID` build output and can be accessed at runtime via the `process.env.NEXT_BUILD_ID` environment variable.
 
 ```ts
-await invalidateCloudFrontPaths([
-  "/foo",
-  `/_next/data/${process.env.NEXT_BUILD_ID}/foo.json`,
-]);
+await invalidateCloudFrontPaths(["/foo", `/_next/data/${process.env.NEXT_BUILD_ID}/foo.json`]);
 ```
 
 And here is an example of the `invalidateCloudFrontPaths()` function:
 
 ```ts
-import {
-  CloudFrontClient,
-  CreateInvalidationCommand,
-} from "@aws-sdk/client-cloudfront";
+import { CloudFrontClient, CreateInvalidationCommand } from "@aws-sdk/client-cloudfront";
 
 const cloudFront = new CloudFrontClient({});
 
@@ -585,6 +579,15 @@ For Next.js 13.2 and later versions, you need to explicitly set the `__NEXT_PRIV
 
 On every request, we try to detect whether the route is using the Pages Router or the App Router. If the Pages Router is being used, we set `__NEXT_PRIVATE_PREBUNDLED_REACT` to `undefined`, which means the React version from the `node_modules` is used. However, if the App Router is used, `__NEXT_PRIVATE_PREBUNDLED_REACT` is set, and the prebundled React version is used.
 
+#### WORKAROUND: 13.4.13+ breaking changes (middleware, redirect, rewrites)
+
+Nextjs 13.4.13 refactored the middleware logic so that it no longer runs in the server handler. Instead they are executed as workeres in child threads, which introduces a non-acceptable latency of ~5 seconds. In order to circumvent this issue, open-next needs to implement the middleware handler before processing the server handler ourselves.
+
+We've introduced a custom esbuild plugin to conditionally inject and override code to properly handle the breaking changes.
+
+The default request handler is in `adapters/plugins/default.ts`
+When open-next needs to override that implementation due to NextJs breaking compatibility, the `createServerBundle` in `build.ts` determines the proper overrides to replace the code of the `default.ts` file.
+
 ## Example
 
 In the `example` folder, you can find a Next.js benchmark app. It contains a variety of pages that each test a single Next.js feature. The app is deployed to both Vercel and AWS using [SST](https://docs.sst.dev/start/nextjs).

examples/app-pages-router/package.json

@@ -13,17 +13,17 @@
   "dependencies": {
     "open-next": "workspace:*",
     "@example/shared": "workspace:*",
-    "@open-next/utils": "workspace:*"
+    "@open-next/utils": "workspace:*",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "next": "13.4.12",
     "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "^4.9.3"
   }

examples/app-router/app/headers/page.tsx

@@ -0,0 +1,11 @@
+import { headers } from "next/headers";
+
+export default function Headers() {
+  const middlewareHeader = headers().get("request-header");
+  return (
+    <div>
+      <h1>Headers</h1>
+      <div>{middlewareHeader}</div>
+    </div>
+  );
+}

examples/app-router/app/page.tsx

@@ -34,6 +34,12 @@ export default function Home() {
         <Nav href={"/parallel"} title="Parallel">
           Parallel routing
         </Nav>
+        <Nav href={"/headers"} title="Headers">
+          Headers from middleware should be available via headers()
+        </Nav>
+        <Nav href={"/search-query"} title="Search Query">
+          Search Query Params should be available in middleware
+        </Nav>
       </main>
     </>
   );

examples/app-router/app/search-query/page.tsx

@@ -0,0 +1,16 @@
+import { headers } from "next/headers";
+
+export default function SearchQuery({
+  searchParams: propsSearchParams,
+}: {
+  searchParams: Record<string, string>;
+}) {
+  const mwSearchParams = headers().get("search-params");
+  return (
+    <>
+      <h1>Search Query</h1>
+      <div>Search Params via Props: {propsSearchParams.searchParams}</div>
+      <div>Search Params via Middleware: {mwSearchParams}</div>
+    </>
+  );
+}

examples/app-router/middleware.ts

@@ -20,10 +20,18 @@ export function middleware(request: NextRequest) {
     });
   }
 
-  const rHeaders = new Headers(request.headers);
+  const requestHeaders = new Headers();
+  requestHeaders.set("request-header", "request-header");
+  requestHeaders.set(
+    "search-params",
+    `mw/${request.nextUrl.searchParams.get("searchParams") || ""}`,
+  );
+  const responseHeaders = new Headers();
+  responseHeaders.set("response-header", "response-header");
   const r = NextResponse.next({
+    headers: responseHeaders,
     request: {
-      headers: rHeaders,
+      headers: requestHeaders,
     },
   });
   return r;

examples/app-router/next.config.js

@@ -7,6 +7,19 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
+  headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "e2e-headers",
+            value: "next.config.js",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

examples/app-router/package.json

@@ -13,17 +13,17 @@
   "dependencies": {
     "open-next": "workspace:*",
     "@example/shared": "workspace:*",
-    "@open-next/utils": "workspace:*"
+    "@open-next/utils": "workspace:*",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "next": "13.4.12",
     "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "^4.9.3"
   }

examples/pages-router/package.json

@@ -16,10 +16,10 @@
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "next": "13.4.12",
+    "next": "latest",
     "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "latest",
+    "react-dom": "latest",
     "tailwindcss": "3.3.3",
     "typescript": "^4.9.3"
   }

packages/open-next/package.json

@@ -40,12 +40,14 @@
     "@node-minify/core": "^8.0.6",
     "@node-minify/terser": "^8.0.6",
     "@tsconfig/node18": "^1.0.1",
-    "esbuild": "^0.15.18",
+    "esbuild": "^0.18.18",
+    "@esbuild-plugins/node-resolve": "0.2.2",
+    "path-to-regexp": "^6.2.1",
     "promise.series": "^0.2.0"
   },
   "devDependencies": {
     "@types/aws-lambda": "^8.10.109",
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.16.1",
     "typescript": "^4.9.3"
   },
   "bugs": {