Use multiValueHeaders in Netlify Functions

Netlify recently added support for multiValueHeaders to Netlify
Functions. By using multiValueHeaders, we can now support NextJS Preview
Mode.

Fixes: #10

Author: FinnWoelm

README.md

@@ -150,7 +150,7 @@ SSR pages and API endpoints. It is currently not possible to create custom Netli
 
 ### Preview Mode
 
-[NextJS Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) is currently not supported. When you call `res.setPreviewData({})`, NextJS tries to set and send two cookies to the user. But Netlify Functions only support setting one cookie per function call at the moment. This is [a long-standing bug on Netlify's side](https://community.netlify.com/t/multiple-set-cookie-headers-cause-netlify-lambda-to-throw-an-error/975). We're discussing work-arounds. See: [Issue #10](https://github.com/FinnWoelm/next-on-netlify/issues/10)
+[NextJS Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) does not work on pages that are pre-rendered (pages with `getStaticProps`). Netlify currently does not support cookie-based redirects, which are needed for supporting preview mode on pre-rendered pages. Preview mode works correctly on any server-side-rendered pages (pages with `getInitialProps` or `getServerSideProps`). See: [Issue #10](https://github.com/FinnWoelm/next-on-netlify/issues/10)
 
 
 ### Fallbacks for Pages with `getStaticPaths`

cypress/fixtures/pages/api/enterPreview.js

@@ -0,0 +1,12 @@
+export default async function preview(req, res) {
+  const { query } = req
+  const { id }    = query
+
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({})
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  res.writeHead(307, { Location: `/previewTest/${id}` })
+  res.end()
+}

cypress/fixtures/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()
+}

cypress/fixtures/pages/index.js

@@ -175,6 +175,19 @@ const Index = ({ shows }) => (
       </li>
     </ul>
 
+    <h1>6. Preview mode? Yes!</h1>
+    <p>
+      next-on-netlify supports preview mode.
+    </p>
+
+    <ul>
+      <li>
+        <Link href="/previewTest/222">
+          <a>previewTest/222</a>
+        </Link>
+      </li>
+    </ul>
+
     <h1>6. Static Pages Stay Static</h1>
     <p>
       next-on-netlify automatically determines which pages are dynamic and

cypress/fixtures/pages/previewTest/[id].js

@@ -0,0 +1,83 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const Show = ({ errorCode, show, person }) => {
+
+  // If show/person item was not found, render 404 page
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  // Otherwise, render show
+  return (
+    <div>
+      <p>
+        This page uses getServerSideProps() and is SSRed.
+        <br/><br/>
+        By default, it shows the TV show by ID.
+        <br/>
+        But when in preview mode, it shows person by ID instead.
+      </p>
+
+      <hr/>
+
+      { show ? (
+        <div>
+          <h1>Show #{show.id}</h1>
+          <p>
+            {show.name}
+          </p>
+        </div>
+      ) : (
+        <div>
+          <h1>Person #{person.id}</h1>
+          <p>
+            {person.name}
+          </p>
+        </div>
+      )}
+
+      <hr/>
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export const getServerSideProps = async (context) => {
+  console.log(context)
+  const { params, preview } = context
+
+  let res = null
+  let show = null
+  let person = null
+
+  // The ID to render
+  const { id } = params
+
+  // In preview mode, load person by ID
+  if(preview) {
+    res = await fetch(`https://api.tvmaze.com/people/${id}`);
+    person = await res.json();
+  }
+  // In normal mode, load TV show by ID
+  else {
+    res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+    show = await res.json();
+  }
+
+  // Set error code if show/person could not be found
+  const errorCode = res.status > 200 ? res.status : false
+
+  return {
+    props: {
+      errorCode,
+      show,
+      person
+    }
+  }
+}
+
+export default Show

cypress/integration/default_spec.js

@@ -456,6 +456,62 @@ describe('API endpoint', () => {
   })
 })
 
+describe('Preview Mode', () => {
+  it('redirects to preview test page', () => {
+    cy.visit('/api/enterPreview?id=999')
+
+    cy.url().should('include', '/previewTest/999')
+  })
+
+  it('sets cookies on client', () => {
+    Cypress.Cookies.debug(true)
+    cy.getCookie('__prerender_bypass').should('not.exist')
+    cy.getCookie('__next_preview_data').should('not.exist')
+
+    cy.visit('/api/enterPreview?id=999')
+
+    cy.getCookie('__prerender_bypass').should('not.be', null)
+    cy.getCookie('__next_preview_data').should('not.be', null)
+  })
+
+  it('renders page in preview mode', () => {
+    cy.visit('/api/enterPreview?id=999')
+
+    if(Cypress.env('DEPLOY') === 'local') {
+      cy.makeCookiesWorkWithHttpAndReload()
+    }
+
+    cy.get('h1').should('contain', 'Person #999')
+    cy.get('p').should('contain',  'Sebastian Lacause')
+  })
+
+  it('can move in and out of preview mode', () => {
+    cy.visit('/api/enterPreview?id=999')
+
+    if(Cypress.env('DEPLOY') === 'local') {
+      cy.makeCookiesWorkWithHttpAndReload()
+    }
+
+    cy.get('h1').should('contain', 'Person #999')
+    cy.get('p').should('contain',  'Sebastian Lacause')
+
+    cy.contains("Go back home").click()
+
+    // Verify that we're still in preview mode
+    cy.contains("previewTest/222").click()
+    cy.get('h1').should('contain', 'Person #222')
+    cy.get('p').should('contain',  'Corey Lof')
+
+    // Exit preview mode
+    cy.visit('/api/exitPreview')
+
+    // Verify that we're no longer in preview mode
+    cy.contains("previewTest/222").click()
+    cy.get('h1').should('contain', 'Show #222')
+    cy.get('p').should('contain',  'Happyland')
+  })
+})
+
 describe('pre-rendered HTML pages', () => {
   context('with static route', () => {
     it('renders', () => {

cypress/support/commands.js

@@ -13,3 +13,20 @@ Cypress.Commands.add("ssr", (url) => {
   // Verify that there are no scripts present
   cy.get('script').should('not.exist')
 })
+
+// NextJS sends cookies with secure: true and Cypress does not send them to
+// the browser, because we are making requests to http:localhost:8888.
+// I briefly considered proxy-ing all requests via https using local-ssl-proxy
+// or similar, but I would prefer sticking as closely to `netlify dev` as
+// possible. Thus, this command to make tests with preview cookies work.
+Cypress.Commands.add('makeCookiesWorkWithHttpAndReload', () => {
+  // First, remove secure attribute from all cookies
+  cy.getCookies().then(cookies => (
+    cookies.forEach(({ name, value, secure, sameSite, ...options }) =>
+      cy.setCookie(name, value, options)
+    )
+  ))
+
+  // Then reload the page (with our new, "non-secure" cookies)
+  cy.reload()
+})

lib/netlifyFunctionTemplate.js

@@ -12,19 +12,10 @@ const callbackHandler = callback => (
   // The callbackHandler wraps the callback
   (argument, response) => {
 
-    // Convert multi-value headers to plain headers, because Netlify does not
-    // support multi-value headers.
-    // See: https://github.com/netlify/cli/issues/923
-    response.headers = {}
-    Object.keys(response.multiValueHeaders).forEach(key => {
-      response.headers[key] = response.multiValueHeaders[key][0]
-    })
-    delete response.multiValueHeaders
-
     // Convert header values to string. Netlify does not support integers as
     // header values. See: https://github.com/netlify/cli/issues/451
-    Object.keys(response.headers).forEach(key => {
-      response.headers[key] = String(response.headers[key])
+    Object.keys(response.multiValueHeaders).forEach(key => {
+      response.multiValueHeaders[key] = response.multiValueHeaders[key].map(value => String(value))
     })
 
     // Invoke callback
@@ -33,6 +24,24 @@ const callbackHandler = callback => (
 )
 
 exports.handler = (event, context, callback) => {
+  // In netlify dev, we currently do not receive headers as multi value headers.
+  // So we manually set them from the plain headers. This should become
+  // redundant as soon as https://github.com/netlify/cli/pull/938 is published.
+  if(!event.hasOwnProperty('multiValueHeaders')) {
+    event.multiValueHeaders = {}
+    Object.keys(event.headers).forEach(key => {
+      event.multiValueHeaders[key] = [event.headers[key]]
+    })
+  }
+
+  // In netlify dev, we currently do not receive query string as multi value
+  // query string. So we manually set it from the plain query string. This
+  // should become redundant as soon as https://github.com/netlify/cli/pull/938
+  //is published.
+  if(!event.hasOwnProperty('multiValueQueryStringParameters')) {
+    event.multiValueQueryStringParameters = event.queryStringParameters
+  }
+
   // Get the request URL
   const { path } = event
   console.log("[request]", path)
@@ -43,8 +52,6 @@ exports.handler = (event, context, callback) => {
       ...event,
       // Required. Otherwise, compat() will complain
       requestContext: {},
-      // Pass query string parameters to NextJS
-      multiValueQueryStringParameters: event.queryStringParameters
     },
     context,
     // Wrap the Netlify callback, so that we can resolve differences between