diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index b41e52f365398c6..221adf792a47b7e 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -202,12 +202,17 @@ function renderFlight(AppMod: any, ComponentMod: any, props: any) {
   const AppServer = isServerComponent
     ? (App as React.ComponentType)
     : React.Fragment
+  const { router: _, ...rest } = props
 
-  return (
-    <AppServer>
-      <Component {...props} />
-    </AppServer>
-  )
+  if (isServerComponent) {
+    return (
+      <AppServer>
+        <Component {...rest} />
+      </AppServer>
+    )
+  }
+
+  return <App Component={Component} {...props} />
 }
 
 export type RenderOptsPartial = {
@@ -734,7 +739,7 @@ export async function renderToHTML(
     AppTree: (props: any) => {
       return (
         <AppContainerWithIsomorphicFiberStructure>
-          {renderFlight(AppMod, ComponentMod, props)}
+          {renderFlight(AppMod, ComponentMod, { ...props, router })}
         </AppContainerWithIsomorphicFiberStructure>
       )
     },
diff --git a/test/integration/app-tree/pages/_app.tsx b/test/integration/app-tree/pages/_app.tsx
index 0bc5545f0098a0d..78e095ae1a6ca10 100644
--- a/test/integration/app-tree/pages/_app.tsx
+++ b/test/integration/app-tree/pages/_app.tsx
@@ -1,9 +1,12 @@
 import React from 'react'
 import Link from 'next/link'
+import { createContext } from 'react'
 import { render } from 'react-dom'
 import App, { AppContext } from 'next/app'
 import { renderToString } from 'react-dom/server'
 
+export const DummyContext = createContext(null)
+
 class MyApp<P = {}> extends App<P & { html: string }> {
   static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
     let pageProps = {}
@@ -32,15 +35,20 @@ class MyApp<P = {}> extends App<P & { html: string }> {
     const { Component, pageProps, html, router } = this.props
     const href = router.pathname === '/' ? '/another' : '/'
 
-    return html && router.pathname !== '/hello' ? (
-      <>
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-        <Link href={href}>
-          <a id={href === '/' ? 'home' : 'another'}>to {href}</a>
-        </Link>
-      </>
-    ) : (
-      <Component {...pageProps} />
+    const child =
+      html && router.pathname !== '/hello' ? (
+        <>
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+          <Link href={href}>
+            <a id={href === '/' ? 'home' : 'another'}>to {href}</a>
+          </Link>
+        </>
+      ) : (
+        <Component {...pageProps} />
+      )
+
+    return (
+      <DummyContext.Provider value={'::ctx::'}>{child}</DummyContext.Provider>
     )
   }
 }
diff --git a/test/integration/app-tree/pages/index.js b/test/integration/app-tree/pages/index.js
index 082531006e0d38c..380f0c02fe5efb2 100644
--- a/test/integration/app-tree/pages/index.js
+++ b/test/integration/app-tree/pages/index.js
@@ -1,7 +1,12 @@
+import { useContext } from 'react'
+import { DummyContext } from './_app'
 import { useRouter } from 'next/router'
 
 const Page = () => {
   const { pathname } = useRouter()
+  const ctx = useContext(DummyContext)
+  if (ctx == null) throw new Error('context consumes failed')
+
   return (
     <>
       <h3>page: {pathname}</h3>