Refactor: Replace compat.js with renderNextPage.js

Wrap the logic for rendering the Next.js page into its own function.
That keeps the netlifyFunction.js (function handler) minimal and easy
to read. It will also make it easier for users to modify the function
handler while keeping the render function unchanged (down the line,
once we support this feature).

Author: FinnWoelm

lib/helpers/setupNetlifyFunctionForPage.js

@@ -24,15 +24,15 @@ const setupNetlifyFunctionForPage = ({ filePath, functionsPath }) => {
   });
 
   // Copy function helpers
-  ["compat.js", "reqResMapper.js"].forEach((helper) => {
+  ["renderNextPage.js", "reqResMapper.js"].forEach((helper) => {
     copySync(join(TEMPLATES_DIR, helper), join(functionDirectory, helper), {
       overwrite: false,
       errorOnExist: true,
     });
   });
 
   // Copy page
-  const nextPageCopyPath = join(functionDirectory, "nextJsPage.js");
+  const nextPageCopyPath = join(functionDirectory, "nextPage.js");
   copySync(join(NEXT_DIST_DIR, "serverless", filePath), nextPageCopyPath, {
     overwrite: false,
     errorOnExist: true,

lib/templates/compat.js

@@ -1,10 +1,8 @@
 // TEMPLATE: This file will be copied to the Netlify functions directory when
 //           running next-on-netlify
 
-// Compatibility wrapper for NextJS page
-const compat = require("./compat");
-// Load the NextJS page
-const page = require("./nextJsPage");
+// Render function for the Next.js page
+const renderNextPage = require("./renderNextPage");
 
 exports.handler = async (event, context, callback) => {
   // x-forwarded-host is undefined on Netlify for proxied apps that need it
@@ -17,15 +15,12 @@ exports.handler = async (event, context, callback) => {
   const { path } = event;
   console.log("[request]", path);
 
-  // Render the page
-  const response = await compat(page)(
-    {
-      ...event,
-      // Required. Otherwise, compat() will complain
-      requestContext: {},
-    },
-    context
-  );
+  // Render the Next.js page
+  const response = await renderNextPage({
+    ...event,
+    // Required. Otherwise, reqResMapper will complain
+    requestContext: {},
+  });
 
   // Convert header values to string. Netlify does not support integers as
   // header values. See: https://github.com/netlify/cli/issues/451

lib/templates/netlifyFunction.js

@@ -0,0 +1,29 @@
+// Load the NextJS page
+const nextPage = require("./nextPage");
+const reqResMapper = require("./reqResMapper");
+
+// Render the Next.js page
+const renderNextPage = (event) => {
+  // The Next.js page is rendered inside a promise that is resolved when the
+  // Next.js page ends the response via `res.end()`
+  const promise = new Promise((resolve) => {
+    // Create a Next.js-compatible request and response object
+    // These mock the ClientRequest and ServerResponse classes from node http
+    // See: https://nodejs.org/api/http.html
+    const callback = (_null, response) => resolve(response);
+    const { req, res } = reqResMapper(event, callback);
+
+    // Check if page is a Next.js page or an API route
+    const isNextPage = nextPage.render instanceof Function;
+    const isApiRoute = !isNextPage;
+
+    // Perform the render: render() for Next.js page or default() for API route
+    if (isNextPage) return nextPage.render(req, res);
+    if (isApiRoute) return nextPage.default(req, res);
+  });
+
+  // Return the promise
+  return promise;
+};
+
+module.exports = renderNextPage;