Make sure to error when setting too large of preview data

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

@@ -361,12 +361,21 @@ function setPreviewData<T>(
     throw new Error('invariant: invalid previewModeSigningKey')
   }
 
+  const stringifiedData = JSON.stringify(data)
+
+  // preview mode cookie can't exceed 4KB or else the browser will drop it
+  if (stringifiedData.length > 4000) {
+    throw new Error(
+      `Preview data can not exceed 4KB as this exceeds the cookie limit`
+    )
+  }
+
   const jsonwebtoken = require('jsonwebtoken') as typeof import('jsonwebtoken')
 
   const payload = jsonwebtoken.sign(
     encryptWithSecret(
       Buffer.from(options.previewModeEncryptionKey),
-      JSON.stringify(data)
+      stringifiedData
     ),
     options.previewModeSigningKey,
     {

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(4000).fill('a'))
+    } 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(4000).fill('a'))
+    } 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' })