diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 2fce72ecb5a83..cf93c9613ad02 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -6,6 +6,7 @@ import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import mitt, { MittEmitter } from '../shared/lib/mitt'
 import { RouterContext } from '../shared/lib/router-context'
 import type Router from '../shared/lib/router/router'
+import type { NextRouter } from '../shared/lib/router/router'
 import {
   AppComponent,
   AppProps,
@@ -174,6 +175,7 @@ const appElement: HTMLElement | null = document.getElementById('__next')
 let lastRenderReject: (() => void) | null
 let webpackHMR: any
 export let router: Router
+let publicRouterInstance: NextRouter
 let CachedApp: AppComponent, onPerfEntry: (metric: any) => void
 headManager.getIsSsr = () => {
   return router.isSsr
@@ -413,6 +415,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
     domainLocales,
     isPreview,
   })
+  publicRouterInstance = makePublicRouterInstance(router)
 
   const renderCtx: RenderRouteInfo = {
     App: CachedApp,
@@ -620,7 +623,7 @@ function AppContainer({
         )
       }
     >
-      <RouterContext.Provider value={makePublicRouterInstance(router)}>
+      <RouterContext.Provider value={publicRouterInstance}>
         <HeadManagerContext.Provider value={headManager}>
           {children}
         </HeadManagerContext.Provider>