add support for preview mode of pre-rendered pages using getStaticProps

Author: lindsaylevine

lib/pages/getStaticProps/redirects.js

@@ -1,7 +1,33 @@
+const { join } = require("path");
+const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
+const getNetlifyFunctionName = require("../../helpers/getNetlifyFunctionName");
 const pages = require("./pages");
 
-// Pages with getStaticProps do not need redirects, unless they are using
+// Pages with getStaticProps should not need redirects, unless they are using
 // fallback: true or a revalidation interval. Both are handled by other files.
+// However, we now support preview mode for pre-rendered pages (without fallback
+// or revalidation), so we create redirects specifically for when preview mode
+// is enabled.
+
 const redirects = [];
 
+pages.forEach(({ route, dataRoute }) => {
+  const relativePath = getFilePathForRoute(route, "js");
+  const filePath = join("pages", relativePath);
+  const functionName = getNetlifyFunctionName(filePath);
+
+  // Add one redirect for the page, but only when the NextJS
+  // preview mode cookies are present
+  redirects.push({
+    route,
+    target: `/.netlify/functions/${functionName}`,
+    force: true,
+    conditions: [
+      "Cookie=__prerender_bypass,__next_preview_data"
+    ]
+  });
+
+  // @finn - not sure this needs a date route redirect?
+});
+
 module.exports = redirects;

lib/pages/getStaticProps/setup.js

@@ -1,7 +1,9 @@
+const { join } = require("path");
 const { logTitle, logItem } = require("../../helpers/logger");
 const { NETLIFY_PUBLISH_PATH } = require("../../config");
 const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
 const setupStaticFileForPage = require("../../helpers/setupStaticFileForPage");
+const setupNetlifyFunctionForPage = require("../../helpers/setupNetlifyFunctionForPage");
 const pages = require("./pages");
 
 // Copy pre-rendered SSG pages
@@ -21,6 +23,12 @@ const setup = () => {
     // Copy page's JSON data
     const jsonPath = getFilePathForRoute(route, "json");
     setupStaticFileForPage(jsonPath, dataRoute);
+
+    // Set up the Netlify function (this is ONLY for preview mode)
+    const relativePath = getFilePathForRoute(route, "js");
+    const filePath = join("pages", relativePath);
+    logItem(filePath);
+    setupNetlifyFunctionForPage(filePath);
   });
 };
 

lib/steps/setupRedirects.js

@@ -45,7 +45,16 @@ const setupRedirects = () => {
     // One route may map to multiple Netlify routes: e.g., catch-all pages
     // require two Netlify routes in the _redirects file
     getNetlifyRoutes(route).map((netlifyRoute) => {
-      const redirect = `${netlifyRoute}  ${nextRedirect.target}  200`;
+      const { conditions, force, statusCode, target } = nextRedirect;
+      const redirectPieces = [
+        netlifyRoute,
+        target,
+        `${statusCode || "200"}${force ? "!" : ""}`
+      ];
+      if (conditions && conditions.length > 0) {
+        redirectPieces.push(conditions.join("  "));
+      }
+      const redirect = redirectPieces.join("  ");
       logItem(redirect);
       redirects.push(redirect);
     });

lib/templates/netlifyFunction.js

@@ -19,6 +19,11 @@ const callbackHandler = (callback) =>
       ].map((value) => String(value));
     });
 
+    // NextJS by default sets Cache-Control to the max age. Without this
+    // override, the Netlify function will cache the very first page render.
+    // TO-DO: set this *only* for SSG'd pages
+    response.multiValueHeaders["cache-control"] = ["no-cache"];
+
     // Invoke callback
     callback(argument, response);
   };