Nextjs 13.0.5 SSR: Error: NextRouter was not mounted.

[abusada]

🐛 Bug description

After upgrading nextjs to version 13.0.5 I started getting: Error: NextRouter was not mounted. when doing server side rendering.

🔍 Bug reproduction

1. Using the same code from Server Side Rendering with Nextjs docs
2. Add useRouter to the page's main code

Live reproduction: Look at pages/index.tsx https://replit.com/@FarisAbusada/NextAlgoliaSSR#pages/index.tsx

💭 Expected behavior

Expect page to render as it did with previous versions of nextjs.

🖥 Screenshots

Environment

"dependencies": {
    "next": "^13.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "algoliasearch": "^4.14.2",
    "react-instantsearch-hooks-server": "^6.38.1",
    "react-instantsearch-hooks-web": "^6.38.1"
  },

[Haroenv]

You'll need to hoist useRouter to a level which isn't called inside getServerState, so that useRouter is only called by Next.js

[abusada]

@Haroenv, thanks for the quick response. I confirm that it works when I don't wrap the whole page with getServerState but only the component that is using InstantSearchSSRProvider.

[Haroenv]

Thanks for confirming this fixed your issue!