diff --git a/packages/next/client/dev/fouc.js b/packages/next/client/dev/fouc.js
deleted file mode 100644
index 5b31cb59974e239..000000000000000
--- a/packages/next/client/dev/fouc.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// This function is used to remove Next.js' no-FOUC styles workaround for using
-// `style-loader` in development. It must be called before hydration, or else
-// rendering won't have the correct computed values in effects.
-export function displayContent(callback) {
-  ;(window.requestAnimationFrame || setTimeout)(function () {
-    for (
-      var x = document.querySelectorAll('[data-next-hide-fouc]'), i = x.length;
-      i--;
-
-    ) {
-      x[i].parentNode.removeChild(x[i])
-    }
-    if (callback) {
-      callback()
-    }
-  })
-}
diff --git a/packages/next/client/dev/fouc.ts b/packages/next/client/dev/fouc.ts
new file mode 100644
index 000000000000000..07e09f2c4bc182b
--- /dev/null
+++ b/packages/next/client/dev/fouc.ts
@@ -0,0 +1,18 @@
+// This function is used to remove Next.js' no-FOUC styles workaround for using
+// `style-loader` in development. It must be called before hydration, or else
+// rendering won't have the correct computed values in effects.
+export function displayContent(): Promise<void> {
+  return new Promise((resolve) => {
+    ;(window.requestAnimationFrame || setTimeout)(function () {
+      for (
+        var x = document.querySelectorAll('[data-next-hide-fouc]'),
+          i = x.length;
+        i--;
+
+      ) {
+        x[i].parentNode!.removeChild(x[i])
+      }
+      resolve()
+    })
+  })
+}
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 5b258c0aa35e5d2..4bd285307154dea 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -271,7 +271,9 @@ class Container extends React.Component<{
 export const emitter: MittEmitter<string> = mitt()
 let CachedComponent: React.ComponentType
 
-export async function initNext(opts: { webpackHMR?: any } = {}) {
+export async function initNext(
+  opts: { webpackHMR?: any; beforeRender?: () => Promise<void> } = {}
+) {
   // This makes sure this specific lines are removed in production
   if (process.env.NODE_ENV === 'development') {
     webpackHMR = opts.webpackHMR
@@ -425,12 +427,11 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
     err: initialErr,
   }
 
-  if (process.env.NODE_ENV === 'production') {
-    render(renderCtx)
-    return emitter
-  } else {
-    return { emitter, renderCtx }
+  if (opts.beforeRender) {
+    await opts.beforeRender()
   }
+
+  render(renderCtx)
 }
 
 export async function render(renderingProps: RenderRouteInfo): Promise<void> {
diff --git a/packages/next/client/next-dev.js b/packages/next/client/next-dev.js
index ebbbe11d60f755d..8f1dad083d2f16a 100644
--- a/packages/next/client/next-dev.js
+++ b/packages/next/client/next-dev.js
@@ -47,8 +47,8 @@ window.next = {
   render,
   renderError,
 }
-initNext({ webpackHMR })
-  .then(({ renderCtx }) => {
+initNext({ webpackHMR, beforeRender: displayContent })
+  .then(() => {
     initOnDemandEntries()
 
     let buildIndicatorHandler = () => {}
@@ -104,11 +104,6 @@ initNext({ webpackHMR })
         buildIndicatorHandler = handler
       }, process.env.__NEXT_BUILD_INDICATOR_POSITION)
     }
-
-    // delay rendering until after styles have been applied in development
-    displayContent(() => {
-      render(renderCtx)
-    })
   })
   .catch((err) => {
     console.error('Error was not caught', err)