feat: preview mode (#16)

* feat: preview mode

* chore: fix snapshot

* chore: fix snapshot.. again?

* fix: use distDir var when reading prerender-manifest, ot .next

* chore: add redirects sort back in..?

* fix: redirects sorting

Author: lindsaylevine

demo/next.config.js

@@ -1,3 +1,10 @@
 module.exports = {
-  target: 'serverless',
+  generateBuildId: () => 'build',
+  // Configurable site features to support:
+  // i18n: {
+  //   defaultLocale: 'en',
+  //   locales: ['en', 'es', 'fr']
+  // },
+  // basePath: '/docs',
+  // distDir: 'build',
 }

demo/pages/api/enterPreview.js

@@ -0,0 +1,6 @@
+export default async function preview(req, res) {
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({})
+
+  res.status(200).json({ name: 'preview mode' })
+}

demo/pages/api/exitPreview.js

@@ -0,0 +1,8 @@
+export default async function exit(_, res) {
+  // Exit the current user from "Preview Mode". This function accepts no args.
+  res.clearPreviewData()
+
+  // Redirect the user back to the index page.
+  res.writeHead(307, { Location: '/' })
+  res.end()
+}

demo/pages/previewTest.js

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+
+const StaticTest = ({ number }) => {
+  return (
+    <div>
+      <p>
+        This page uses getStaticProps() and is SSRed when in preview mode.
+        <br />
+        <br />
+        By default, it shows the TV show by ID (as static HTML).
+        <br />
+        But when in preview mode, it shows person by ID instead (SSRed).
+      </p>
+
+      <hr />
+
+      <h1>Number: {number}</h1>
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export const getStaticProps = async ({ preview }) => {
+  let number
+
+  // In preview mode, use odd number
+  if (preview) {
+    number = 3
+  }
+  // In normal mode, use even number
+  else {
+    number = 4
+  }
+
+  return {
+    props: {
+      number,
+    },
+  }
+}
+
+export default StaticTest

package.json

@@ -22,7 +22,7 @@
     "publish:pull": "git pull",
     "publish:install": "npm ci",
     "publish:test": "npm test",
-    "test": "run-s build:demo test:jest",
+    "test": "run-s build build:demo test:jest",
     "test:jest": "jest",
     "prepare": "npm run build",
     "clean": "rimraf lib",

src/helpers/getHandler.js

@@ -27,10 +27,31 @@ const makeHandler =
     bridge.listen()
 
     return async (event, context) => {
-      const result = await bridge.launcher(event, context)
+      const { headers, ...result } = await bridge.launcher(event, context)
       /** @type import("@netlify/functions").HandlerResponse */
+
+      // Convert all headers to multiValueHeaders
+      const multiValueHeaders = {}
+      for (const key of Object.keys(headers)) {
+        if (Array.isArray(headers[key])) {
+          multiValueHeaders[key] = headers[key]
+        } else {
+          multiValueHeaders[key] = [headers[key]]
+        }
+      }
+
+      if (
+        multiValueHeaders['set-cookie'] &&
+        multiValueHeaders['set-cookie'][0] &&
+        multiValueHeaders['set-cookie'][0].includes('__prerender_bypass')
+      ) {
+        delete multiValueHeaders.etag
+        multiValueHeaders['cache-control'] = ['no-cache']
+      }
+
       return {
         ...result,
+        multiValueHeaders,
         isBase64Encoded: result.encoding === 'base64',
       }
     }

src/helpers/writeRedirects.js

@@ -45,38 +45,39 @@ const getNetlifyRoutes = (nextRoute) => {
   return netlifyRoutes
 }
 
-const writeRedirects = async ({ siteRoot = process.cwd(), netlifyConfig }) => {
-  const { dynamicRoutes } = await readJSON(path.join(siteRoot, '.next', 'prerender-manifest.json'))
+const writeRedirects = async ({ siteRoot = process.cwd(), distDir, netlifyConfig }) => {
+  const { dynamicRoutes } = await readJSON(path.join(siteRoot, distDir, 'prerender-manifest.json'))
 
   const redirects = []
-  Object.entries(dynamicRoutes).forEach(([route, { dataRoute, fallback }]) => {
-    // We want to add redirects if the fallback is "null" or true
+
+  const dynamicRouteEntries = Object.entries(dynamicRoutes)
+  dynamicRouteEntries.sort((a, b) => a[0].localeCompare(b[0]))
+
+  dynamicRouteEntries.forEach(([route, { dataRoute, fallback }]) => {
+    // Add redirects if fallback is "null" (aka blocking) or true/a string
     if (fallback === false) {
       return
     }
     redirects.push(...getNetlifyRoutes(route), ...getNetlifyRoutes(dataRoute))
   })
-  redirects.sort()
 
   // This is only used in prod, so dev uses `next dev` directly
   netlifyConfig.redirects.push(
+    { from: '/_next/static/*', to: '/static/:splat', status: 200 },
+    {
+      from: '/*',
+      to: HANDLER_FUNCTION_PATH,
+      status: 200,
+      force: true,
+      conditions: { Cookie: ['__prerender_bypass', '__next_preview_data'] },
+    },
     ...redirects.map((redirect) => ({
       from: redirect,
       to: ODB_FUNCTION_PATH,
       status: 200,
     })),
-    { from: '/_next/static/*', to: '/static/:splat', status: 200 },
     { from: '/*', to: HANDLER_FUNCTION_PATH, status: 200 },
   )
-  // If we want to use the Netlify functions handler we'd need to do it like this,
-  // as `ntl dev` doesn't support mutating redirects at the moment. Maybe this should be an env var, to make testing easier?
-  // const odbRedirects = `${redirects
-  //   .map((redir) => `${redir} ${ODB_FUNCTION_PATH} 200`)
-  //   .join("\n")}
-  // /_next/static/* /static/:splat 200
-  // /* ${HANDLER_FUNCTION_PATH} 200
-  //     `;
-  // await writeFile(path.join(siteRoot, publishDir, "_redirects"), odbRedirects);
 }
 
 module.exports = writeRedirects

src/index.js

@@ -58,12 +58,13 @@ module.exports = {
 
     const siteRoot = getNextRoot({ netlifyConfig })
 
-    const { images } = await getNextConfig(failBuild, siteRoot)
+    const { distDir, images } = await getNextConfig(failBuild, siteRoot)
 
     await setupImageFunction({ constants, imageconfig: images, netlifyConfig })
 
     await writeRedirects({
       siteRoot,
+      distDir,
       netlifyConfig,
     })
 

test/__snapshots__/index.js.snap

@@ -1,17 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`onBuild() writes correct redirects to netlifyConfig 1`] = `
-"/_next/image* /_ipx/w_:width,q_:quality/:url 301
-/_ipx/* /.netlify/functions/_ipx 200
-/_next/data/%BUILD_ID%/getStaticProps/withFallback/:id.json /.netlify/functions/___netlify-odb-handler 200
-/_next/data/%BUILD_ID%/getStaticProps/withFallback/:slug/* /.netlify/functions/___netlify-odb-handler 200
-/_next/data/%BUILD_ID%/getStaticProps/withFallbackBlocking/:id.json /.netlify/functions/___netlify-odb-handler 200
-/_next/data/%BUILD_ID%/getStaticProps/withRevalidate/withFallback/:id.json /.netlify/functions/___netlify-odb-handler 200
-/getStaticProps/withFallback/:id /.netlify/functions/___netlify-odb-handler 200
-/getStaticProps/withFallback/:slug/* /.netlify/functions/___netlify-odb-handler 200
-/getStaticProps/withFallbackBlocking/:id /.netlify/functions/___netlify-odb-handler 200
-/getStaticProps/withRevalidate/withFallback/:id /.netlify/functions/___netlify-odb-handler 200
-/_next/static/* /static/:splat 200
-/* /.netlify/functions/___netlify-handler 200
-"
+Array [
+  Object {
+    "from": "/_next/image*",
+    "query": Object {
+      "q": ":quality",
+      "url": ":url",
+      "w": ":width",
+    },
+    "status": 301,
+    "to": "/_ipx/w_:width,q_:quality/:url",
+  },
+  Object {
+    "from": "/_ipx/*",
+    "status": 200,
+    "to": "/.netlify/functions/_ipx",
+  },
+  Object {
+    "from": "/_next/static/*",
+    "status": 200,
+    "to": "/static/:splat",
+  },
+  Object {
+    "conditions": Object {
+      "Cookie": Array [
+        "__prerender_bypass",
+        "__next_preview_data",
+      ],
+    },
+    "force": true,
+    "from": "/*",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-handler",
+  },
+  Object {
+    "from": "/getStaticProps/withFallback/:slug/*",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/_next/data/build/getStaticProps/withFallback/:slug/*",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/getStaticProps/withFallback/:id",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/_next/data/build/getStaticProps/withFallback/:id.json",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/getStaticProps/withFallbackBlocking/:id",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/_next/data/build/getStaticProps/withFallbackBlocking/:id.json",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/getStaticProps/withRevalidate/withFallback/:id",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/_next/data/build/getStaticProps/withRevalidate/withFallback/:id.json",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-odb-handler",
+  },
+  Object {
+    "from": "/*",
+    "status": 200,
+    "to": "/.netlify/functions/___netlify-handler",
+  },
+]
 `;

test/index.js

@@ -317,15 +317,7 @@ describe('onBuild()', () => {
       utils,
     })
 
-    let redirects = netlifyConfig.redirects.reduce((acc, curr) => {
-      const { from, to, status } = curr
-      return acc + `${from} ${to} ${status}\n`
-    }, '')
-
-    // Replace non-persistent build ID with placeholder
-    redirects = redirects.replace(/\/_next\/data\/[^\/]+\//g, '/_next/data/%BUILD_ID%/')
-
-    expect(redirects).toMatchSnapshot()
+    expect(netlifyConfig.redirects).toMatchSnapshot()
   })
 
   test('publish dir is/has next dist', async () => {