Support Next.js 404 pages (#78)

* Fix "Cannot find package 'next'"

* Support Next.js 404 pages

Author: fwang

.changeset/wet-dryers-battle.md

@@ -0,0 +1,5 @@
+---
+"open-next": minor
+---
+
+Support Next.js 404 pages

packages/open-next/src/adapters/server-adapter.ts

@@ -14,11 +14,14 @@ import NextServer from "next/dist/server/next-server.js";
 import { loadConfig } from "./util.js";
 import { isBinaryContentType } from "./binary.js";
 import { debug } from "./logger.js";
+import type { PublicAssets } from "../build.js";
 
 setNextjsServerWorkingDirectory();
 const nextDir = path.join(__dirname, ".next");
+const openNextDir = path.join(__dirname, ".open-next");
 const config = loadConfig(nextDir);
 const htmlPages = loadHtmlPages();
+const publicAssets = loadPublicAssets();
 debug({ nextDir });
 
 // Create a NextServer
@@ -132,6 +135,18 @@ export async function handler(
   const parser = isCloudFrontEvent
     ? eventParser.cloudfront(event as CloudFrontRequestEvent)
     : eventParser.apiv2(event as APIGatewayProxyEventV2);
+
+  // WORKAROUND: public/ static files served by the server function (AWS specific) — https://github.com/serverless-stack/open-next#workaround-public-static-files-served-by-the-server-function-aws-specific
+  if (
+    publicAssets[parser.rawPath] === "file" ||
+    publicAssets[parser.rawPath.split("/")[0]] === "dir"
+  ) {
+    return isCloudFrontEvent
+      ? formatCloudFrontFailoverResponse(event as CloudFrontRequestEvent)
+      : formatApiv2FailoverResponse();
+  }
+
+  // Process Next.js request
   const reqProps = {
     method: parser.method,
     url: parser.url,
@@ -142,8 +157,6 @@ export async function handler(
   debug("IncomingMessage constructor props", reqProps);
   const req = new IncomingMessage(reqProps);
   const res = new ServerResponse({ method: reqProps.method });
-
-  // Process Next.js request
   await processRequest(req, res);
 
   // Format Next.js response to Lambda response
@@ -165,10 +178,7 @@ export async function handler(
   }
 
   return isCloudFrontEvent
-    ? // WORKAROUND: public/ static files served by the server function (AWS specific) — https://github.com/serverless-stack/open-next#workaround-public-static-files-served-by-the-server-function-aws-specific
-      statusCode === 404
-      ? formatCloudFrontFailoverResponse(event as CloudFrontRequestEvent)
-      : formatCloudFrontResponse({ statusCode, headers, isBase64Encoded, body })
+    ? formatCloudFrontResponse({ statusCode, headers, isBase64Encoded, body })
     : formatApiv2Response({ statusCode, headers, isBase64Encoded, body });
 }
 
@@ -189,6 +199,12 @@ function loadHtmlPages() {
     .map(([key]) => key);
 }
 
+function loadPublicAssets() {
+  const filePath = path.join(openNextDir, "public-files.json");
+  const json = fs.readFileSync(filePath, "utf-8");
+  return JSON.parse(json) as PublicAssets;
+}
+
 async function processRequest(req: IncomingMessage, res: ServerResponse) {
   // @ts-ignore
   // Next.js doesn't parse body if the property exists
@@ -246,6 +262,10 @@ function formatApiv2Response({
   return response;
 }
 
+function formatApiv2FailoverResponse() {
+  return { statusCode: 503 };
+}
+
 function formatCloudFrontResponse({
   statusCode,
   headers: rawHeaders,

packages/open-next/src/build.ts

@@ -9,6 +9,8 @@ const appPath = process.cwd();
 const outputDir = ".open-next";
 const tempDir = path.join(outputDir, ".build");
 
+export type PublicAssets = Record<string, "file" | "dir">;
+
 export async function build() {
   // Pre-build validation
   printVersion();
@@ -110,6 +112,19 @@ function initOutputDir() {
   fs.mkdirSync(tempDir, { recursive: true });
 }
 
+function readTopLevelPublicFilesAndDirs() {
+  const publicPath = path.join(appPath, "public");
+
+  const items: PublicAssets = {};
+
+  fs.readdirSync(publicPath).map((file) => {
+    items[`/${file}`] = fs.statSync(path.join(publicPath, file)).isDirectory()
+      ? "dir"
+      : "file";
+  });
+  return items;
+}
+
 function createServerBundle(monorepoRoot: string) {
   console.info(`Bundling server function...`);
 
@@ -165,6 +180,14 @@ function createServerBundle(monorepoRoot: string) {
       [`export * from "./${packagePath}/index.mjs";`].join("")
     );
   }
+
+  // Save a list of top level files in /public
+  const outputOpenNextPath = path.join(outputPath, packagePath, ".open-next");
+  fs.mkdirSync(outputOpenNextPath, { recursive: true });
+  fs.writeFileSync(
+    path.join(outputOpenNextPath, "public-files.json"),
+    JSON.stringify(readTopLevelPublicFilesAndDirs())
+  );
 }
 
 function createImageOptimizationBundle() {