Once you have that figured, you can use something like this in the router:

import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; 

render() {
        return (
            <Router>
                <YourNavBar/>
                <Switch>
              {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
                    {...}
                </Switch>
                <YourFooter />
            </Router>
        );
    }

Let me know if this works.. TBH, i'm not even sure making NextJS as an SPA is 100% possible since it's server side rendered..