Getting the current url on the client side in next.js Getting the current url on the client side in next.js express express

Getting the current url on the client side in next.js


You can wrap your component with withRouter HOC, that will inject the router object, that has current pathname.

import { withRouter } from 'next/router';const Admin = ({ router }) => (  <AdminLayout>    <style global jsx>      {`        body {          background: #eff0f3;        }      `}    </style>    <div className="jumbotron" style={jumbotron}>      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}    </div>  </AdminLayout>);export default withRouter(Admin);

Edit

If you prefer hooks you can use useRouter hook.

import { useRouter } from 'next/router';const Admin = () => {const router = useRouter();return (  <AdminLayout>    <style global jsx>      {`        body {          background: #eff0f3;        }      `}    </style>    <div className="jumbotron" style={jumbotron}>      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}    </div>  </AdminLayout>);};export default Admin;