diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index fd44ba7a7b34..9b5086028300 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -289,6 +289,18 @@ export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
   return { assetPrefix: prefix }
 }
 
+const wrapApp =
+  (App: AppComponent) =>
+  (wrappedAppProps: Record<string, any>): JSX.Element => {
+    const appProps: AppProps = {
+      ...wrappedAppProps,
+      Component: CachedComponent,
+      err: initialData.err,
+      router,
+    }
+    return <AppContainer>{renderApp(App, appProps)}</AppContainer>
+  }
+
 export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
   let initialErr = initialData.err
 
@@ -396,18 +408,6 @@ export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
     await window.__NEXT_PRELOADREADY(initialData.dynamicIds)
   }
 
-  const wrapApp =
-    (App: AppComponent) =>
-    (wrappedAppProps: Record<string, any>): JSX.Element => {
-      const appProps: AppProps = {
-        ...wrappedAppProps,
-        Component: CachedComponent,
-        err: initialData.err,
-        router,
-      }
-      return <AppContainer>{renderApp(App, appProps)}</AppContainer>
-    }
-
   router = createRouter(initialData.page, initialData.query, asPath, {
     initialProps: initialData.props,
     pageLoader,