Estoy tratando de crear un enlace de autenticación del lado del servidor en Next.js

withAuth.tsx

 import React from "react"; import { NextRouter, withRouter } from "next/router"; import { AuthContext } from "../contexts/AuthContext"; interface Options { requiresAuth: boolean; redirectsTo: string; } interface WithRouterProps { router: NextRouter; } interface WithAuthProps extends WithRouterProps {} const withAuth = ( Component: Function, options: Partial<Options> = { requiresAuth: true, redirectsTo: "/something", } ) => { class WithAuth extends React.Component<WithAuthProps> { user = this.context.user; static contextType = AuthContext; render() { if (!this.user) { if (options.requiresAuth) { return this.props.router.push(options.redirectsTo!!); } else return <Component />; } else { if (options.requiresAuth) return <Component />; else return this.props.router.push(options.redirectsTo!!); } } } return withRouter(WithAuth); }; export default withAuth;

index.tsx

 import type { NextPage } from "next"; import withAuth from "../hooks/withAuth"; const Home: NextPage = () => { return <div>Index</div>; }; export default withAuth(Home);

Y el mensaje de error completo que recibo:

 Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance

De la documentación de Next.js:

Durante la representación previa (SSR o SSG), intentó acceder a un método de enrutador empujar, reemplazar, retroceder, que no es compatible.

En un Componente de clase, mueva cualquier llamada a los métodos de enrutador al método de ciclo de vida del componentDidMount .

Sospecho que el segundo punto es de donde viene mi problema. Pero la cuestión es que necesito empujar el enrutador desde la función de render . Hay alguna solución para esto. Gracias.