diff --git a/examples/styled-jsx-with-csp/package.json b/examples/styled-jsx-with-csp/package.json
index f2a1ff90b782c..27b6762f73671 100644
--- a/examples/styled-jsx-with-csp/package.json
+++ b/examples/styled-jsx-with-csp/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "nanoid": "3.1.21",
-    "next": "10.0.8",
+    "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }
diff --git a/examples/styled-jsx-with-csp/pages/_document.jsx b/examples/styled-jsx-with-csp/pages/_document.jsx
index d56dbb3891489..848657e1fcf4a 100644
--- a/examples/styled-jsx-with-csp/pages/_document.jsx
+++ b/examples/styled-jsx-with-csp/pages/_document.jsx
@@ -1,17 +1,9 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
-import flush from 'styled-jsx/server'
-
 import { nanoid } from 'nanoid'
-
 class CustomDocument extends Document {
   static async getInitialProps(ctx) {
     const nonce = nanoid()
-
-    // https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx#L89
-    const { html, head } = await ctx.renderPage()
-
-    // Adds `nonce` to style tags on Server Side Rendering
-    const styles = [...flush({ nonce })]
+    const docProps = await ctx.defaultGetInitialProps(ctx, { nonce })
 
     let contentSecurityPolicy = ''
     if (process.env.NODE_ENV === 'production') {
@@ -24,8 +16,7 @@ class CustomDocument extends Document {
     }
 
     ctx.res.setHeader('Content-Security-Policy', contentSecurityPolicy)
-
-    return { styles, html, head, nonce }
+    return { ...docProps, nonce }
   }
 
   render() {
diff --git a/packages/next/package.json b/packages/next/package.json
index b5d14576e297f..0a8c4a9b909ac 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -114,7 +114,7 @@
     "stream-browserify": "3.0.0",
     "stream-http": "3.1.1",
     "string_decoder": "1.3.0",
-    "styled-jsx": "5.0.0-beta.3",
+    "styled-jsx": "5.0.0-beta.5",
     "timers-browserify": "2.0.12",
     "tty-browserify": "0.0.1",
     "use-subscription": "1.5.1",
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index f6ec26ca0aa13..bcef273b98b2c 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -637,14 +637,15 @@ export async function renderToHTML(
       )
     },
     defaultGetInitialProps: async (
-      docCtx: DocumentContext
+      docCtx: DocumentContext,
+      options: { nonce?: string } = {}
     ): Promise<DocumentInitialProps> => {
       const enhanceApp = (AppComp: any) => {
         return (props: any) => <AppComp {...props} />
       }
 
       const { html, head } = await docCtx.renderPage({ enhanceApp })
-      const styles = jsxStyleRegistry.styles()
+      const styles = jsxStyleRegistry.styles({ nonce: options.nonce })
       return { html, head, styles }
     },
   }
diff --git a/yarn.lock b/yarn.lock
index 19daa780cb978..e72e20bd0bfbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18448,10 +18448,10 @@ styled-jsx-plugin-postcss@3.0.2:
     postcss "^7.0.2"
     postcss-load-plugins "^2.3.0"
 
-styled-jsx@5.0.0-beta.3:
-  version "5.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz#400d16179b5dff10d5954ab8be27a9a1b7780dd2"
-  integrity sha512-HtDDGSFPvmjHIqWf9n8Oo54tAoY/DTplvlyOH2+YOtD80Sp31Ap8ffSmxhgk5EkUoJ7xepdXMGT650mSffWuRA==
+styled-jsx@5.0.0-beta.5:
+  version "5.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.5.tgz#f603c20bda0625a2aa3b6bed40211e21641e5410"
+  integrity sha512-QTdBoD+vmxQX68DHMwKTYdC6Z5DLVuNoGoFf+Ih3yZ8jch4WjpR83s21uQA44ZDeB6iUFKs8N60W3y/vkl6ehA==
   dependencies:
     "@babel/plugin-syntax-jsx" "7.14.5"
     "@babel/types" "7.15.0"