Make sure to error when setting too large of preview data

packages/next/next-server/server/api-utils.ts

@@ -377,6 +377,14 @@ function setPreviewData<T>(
     }
   )
 
+  // limit preview mode cookie to 2KB since we shouldn't store too much
+  // data here and browsers drop cookies over 4KB
+  if (payload.length > 2048) {
+    throw new Error(
+      `Preview data is limited to 2KB currently, reduce how much data you are storing as preview data to continue`
+    )
+  }
+
   const { serialize } = require('cookie') as typeof import('cookie')
   const previous = res.getHeader('Set-Cookie')
   res.setHeader(`Set-Cookie`, [

test/integration/getserversideprops-preview/pages/api/preview.js

@@ -1,4 +1,13 @@
 export default (req, res) => {
-  res.setPreviewData(req.query)
+  if (req.query.tooBig) {
+    try {
+      res.setPreviewData(new Array(2000).fill('a').join(''))
+    } catch (err) {
+      return res.status(500).end('too big')
+    }
+  } else {
+    res.setPreviewData(req.query)
+  }
+
   res.status(200).end()
 }

test/integration/getserversideprops-preview/test/index.test.js

@@ -156,6 +156,12 @@ function runTests(startServer = nextStart) {
     expect(cookies[1]).not.toHaveProperty('Max-Age')
   })
 
+  it('should throw error when setting too large of preview data', async () => {
+    const res = await fetchViaHTTP(appPort, '/api/preview?tooBig=true')
+    expect(res.status).toBe(500)
+    expect(await res.text()).toBe('too big')
+  })
+
   /** @type import('next-webdriver').Chain */
   let browser
   it('should start the client-side browser', async () => {

test/integration/prerender-preview/pages/api/preview.js

@@ -1,4 +1,13 @@
 export default (req, res) => {
-  res.setPreviewData(req.query)
+  if (req.query.tooBig) {
+    try {
+      res.setPreviewData(new Array(2000).fill('a').join(''))
+    } catch (err) {
+      return res.status(500).end('too big')
+    }
+  } else {
+    res.setPreviewData(req.query)
+  }
+
   res.status(200).end()
 }

test/integration/prerender-preview/test/index.test.js

@@ -63,6 +63,12 @@ function runTests(startServer = nextStart) {
     expect(pre).toBe('undefined and undefined')
   })
 
+  it('should throw error when setting too large of preview data', async () => {
+    const res = await fetchViaHTTP(appPort, '/api/preview?tooBig=true')
+    expect(res.status).toBe(500)
+    expect(await res.text()).toBe('too big')
+  })
+
   let previewCookieString
   it('should enable preview mode', async () => {
     const res = await fetchViaHTTP(appPort, '/api/preview', { lets: 'goooo' })