feat (core, lambda-at-edge): not found support in SSG fallback (#1366)

Author: jvarho

packages/compat-layers/lambda-at-edge-compat/__tests__/next-aws-cloudfront.response.test.js

@@ -119,7 +119,36 @@ describe("Response Tests", () => {
     });
   });
 
-  it("writeHead preserves existing special CloudFront Headers", () => {
+  it("writeHead preserves existing Headers", () => {
+    expect.assertions(1);
+
+    const cloudFrontReadOnlyHeaders = {
+      "Content-Length": "1234",
+      "x-custom-1": "1"
+    };
+
+    const { res, responsePromise } = create({
+      request: {
+        uri: "/",
+        headers: {}
+      },
+      response: {
+        headers: cloudFrontReadOnlyHeaders
+      }
+    });
+
+    res.writeHead(200, {});
+    res.end();
+
+    return responsePromise.then((response) => {
+      expect(response.headers).toEqual({
+        "content-length": "1234",
+        "x-custom-1": "1"
+      });
+    });
+  });
+
+  it("writeHead does not overwrite special CloudFront Headers", () => {
     expect.assertions(1);
 
     const cloudFrontReadOnlyHeaders = {

packages/compat-layers/lambda-at-edge-compat/next-aws-cloudfront.js

@@ -92,19 +92,16 @@ const HttpStatusCodes = {
 
 const toCloudFrontHeaders = (headers, headerNames, originalHeaders) => {
   const result = {};
-  const lowerCaseOriginalHeaders = {};
-  Object.entries(originalHeaders).forEach(([header, value]) => {
-    lowerCaseOriginalHeaders[header.toLowerCase()] = value;
+
+  Object.entries(originalHeaders).forEach(([headerName, headerValue]) => {
+    result[headerName.toLowerCase()] = headerValue;
   });
 
   Object.entries(headers).forEach(([headerName, headerValue]) => {
     const headerKey = headerName.toLowerCase();
     headerName = headerNames[headerKey] || headerName;
 
     if (readOnlyCloudFrontHeaders[headerKey]) {
-      if (lowerCaseOriginalHeaders[headerKey]) {
-        result[headerKey] = lowerCaseOriginalHeaders[headerKey];
-      }
       return;
     }
 
@@ -217,6 +214,7 @@ const handler = (
   const headerNames = {};
   res.writeHead = (status, headers) => {
     response.status = status;
+    response.statusDescription = HttpStatusCodes[status];
 
     if (headers) {
       res.headers = Object.assign(res.headers, headers);

packages/e2e-tests/next-app-dynamic-routes/cypress/integration/pages.test.ts

@@ -348,7 +348,7 @@ describe("Pages Tests", () => {
         prerendered: true
       },
       {
-        path: "/optional-catch-all-ssg-with-fallback/not-found",
+        path: "/optional-catch-all-ssg-with-fallback/not-prerendered",
         param: "",
         prerendered: false
       }
@@ -450,6 +450,49 @@ describe("Pages Tests", () => {
         //  However, verified manually that it works correctly.
       });
     });
+
+    [{ path: "/optional-catch-all-ssg-with-fallback/not-found" }].forEach(
+      ({ path }) => {
+        ["HEAD", "GET"].forEach((method) => {
+          it(`allows HTTP method for path ${path}: ${method} and returns 200 status`, () => {
+            cy.request({
+              url: path,
+              method: method,
+              failOnStatusCode: false
+            }).then((response) => {
+              expect(response.status).to.equal(200);
+            });
+          });
+        });
+
+        ["DELETE", "POST", "OPTIONS", "PUT", "PATCH"].forEach((method) => {
+          it(`disallows HTTP method for path ${path} with 4xx status code: ${method}`, () => {
+            cy.request({
+              url: path,
+              method: method,
+              failOnStatusCode: false
+            }).then((response) => {
+              expect(response.status).to.be.gte(400);
+            });
+          });
+        });
+
+        it(`returns 404 on data request for ${path}`, () => {
+          const fullPath = `/_next/data/${buildId}${path.replace(
+            /\/$/,
+            "/index"
+          )}.json`;
+
+          cy.request({
+            url: fullPath,
+            method: "GET",
+            failOnStatusCode: false
+          }).then((response) => {
+            expect(response.status).to.equal(404);
+          });
+        });
+      }
+    );
   });
 
   describe("Dynamic SSR page", () => {

packages/e2e-tests/next-app-dynamic-routes/pages/optional-catch-all-ssg-with-fallback/[[...catch]].tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GetServerSidePropsContext } from "next";
+import { GetServerSidePropsContext, GetStaticPropsResult } from "next";
 
 type OptionalCatchAllPageProps = {
   name: string;
@@ -22,9 +22,15 @@ export default function OptionalCatchAllPage(
 
 export async function getStaticProps(
   ctx: GetServerSidePropsContext
-): Promise<{ props: OptionalCatchAllPageProps }> {
+): Promise<GetStaticPropsResult<OptionalCatchAllPageProps>> {
   const catchAll = ((ctx.params?.catch as string[]) ?? []).join("/");
 
+  if (catchAll === "not-found") {
+    return {
+      notFound: true
+    };
+  }
+
   return {
     props: { name: "serverless-next.js", catch: catchAll }
   };

packages/libs/core/src/build/index.ts

@@ -46,7 +46,8 @@ export const prepareBuildManifests = async (
       },
       ssg: {
         dynamic: {},
-        nonDynamic: {}
+        nonDynamic: {},
+        notFound: {}
       }
     },
     publicFiles: {},
@@ -138,6 +139,13 @@ export const prepareBuildManifests = async (
     }
   );
 
+  // Add not found SSG routes
+  const notFound: { [key: string]: true } = {};
+  (prerenderManifest.notFoundRoutes ?? []).forEach((route) => {
+    notFound[route] = true;
+  });
+  ssgPages.notFound = notFound;
+
   // Include only SSR routes that are in runtime use
   const ssrPages = (pageManifest.pages.ssr = usedSSR(
     pageManifest,

packages/libs/core/src/handle/fallback.ts

@@ -23,6 +23,20 @@ type Fallback = {
   renderOpts: any;
 };
 
+const renderNotFound = async (
+  event: Event,
+  manifest: PageManifest,
+  routesManifest: RoutesManifest,
+  getPage: (page: string) => any
+): Promise<StaticRoute | void> => {
+  const route = notFoundPage(event.req.url ?? "", manifest, routesManifest);
+  if (route.isStatic) {
+    return route as StaticRoute;
+  }
+
+  return await renderRoute(event, route, manifest, routesManifest, getPage);
+};
+
 const renderFallback = async (
   event: Event,
   route: FallbackRoute,
@@ -40,6 +54,17 @@ const renderFallback = async (
       res,
       "passthrough"
     );
+
+    if (renderOpts.isNotFound) {
+      if (route.isData) {
+        res.setHeader("Content-Type", "application/json");
+        res.statusCode = 404;
+        res.end(JSON.stringify({ notFound: true }));
+        return;
+      }
+      return renderNotFound(event, manifest, routesManifest, getPage);
+    }
+
     return { isStatic: false, route, html, renderOpts };
   } catch (error) {
     return renderErrorPage(
@@ -94,14 +119,5 @@ export const handleFallback = async (
     }
   }
 
-  const errorRoute = notFoundPage(
-    event.req.url ?? "",
-    manifest,
-    routesManifest
-  );
-  if (errorRoute.isStatic) {
-    return errorRoute as StaticRoute;
-  }
-
-  return renderRoute(event, errorRoute, manifest, routesManifest, getPage);
+  return await renderNotFound(event, manifest, routesManifest, getPage);
 };

packages/libs/core/src/route/data.ts

@@ -53,6 +53,9 @@ export const handleDataReq = (
       revalidate: ssg.initialRevalidateSeconds
     };
   }
+  if ((pages.ssg.notFound ?? {})[localeUri] && !isPreview) {
+    return notFoundData(uri, manifest, routesManifest);
+  }
   if (pages.ssr.nonDynamic[localeUri]) {
     return {
       isData: true,

packages/libs/core/src/route/page.ts

@@ -56,6 +56,9 @@ export const handlePageReq = (
       statusCode
     };
   }
+  if ((pages.ssg.notFound ?? {})[localeUri] && !isPreview) {
+    return notFoundPage(uri, manifest, routesManifest);
+  }
   if (pages.ssr.nonDynamic[localeUri]) {
     return {
       isData: false,

packages/libs/core/src/types.ts

@@ -93,6 +93,9 @@ export type PageManifest = Manifest & {
       nonDynamic: {
         [key: string]: NonDynamicSSG;
       };
+      notFound?: {
+        [key: string]: true;
+      };
     };
     ssr: {
       dynamic: { [key: string]: string };

packages/libs/core/tests/handle/default.test.ts

@@ -25,7 +25,7 @@ describe("Default handler", () => {
   beforeAll(async () => {
     prerenderManifest = {
       version: 3,
-      notFoundRoutes: [],
+      notFoundRoutes: ["/fallback/404"],
       routes: {
         "/ssg": {
           initialRevalidateSeconds: false,
@@ -262,6 +262,7 @@ describe("Default handler", () => {
       ${"/foo"}          | ${"pages/[root].html"}
       ${"/html/bar"}     | ${"pages/html/[page].html"}
       ${"/fallback/new"} | ${"pages/fallback/new.html"}
+      ${"/fallback/404"} | ${"pages/404.html"}
       ${"/rewrite-path"} | ${"pages/[root].html"}
     `("Routes static page $uri to file $file", async ({ uri, file }) => {
       const route = await handleDefault(
@@ -282,6 +283,7 @@ describe("Default handler", () => {
     it.each`
       uri                                              | file
       ${"/_next/data/test-build-id/fallback/new.json"} | ${"/_next/data/test-build-id/fallback/new.json"}
+      ${"/_next/data/test-build-id/fallback/404.json"} | ${"pages/404.html"}
       ${"/_next/data/test-build-id/not-found.json"}    | ${"pages/404.html"}
       ${"/_next/data/not-build-id/fallback/new.json"}  | ${"pages/404.html"}
     `("Routes static data route $uri to file $file", async ({ uri, file }) => {