title: Getting the current url on the client side in next.js
body: <p>So I am working on a nodejs app which I will have my new website on and I want to make a way for my user on the clientside to display different things, re-renderd depending on what the user is pressing on. My idea is that for example firstly the user would see "Please select a tool first" and then the user will select a tool in the navbar which then the page will be re-renderd and display the tool selected inside a jumbotron with the url being changed for example then /admin/[ToolSelected]. </p>
  
  <p>The only thing is tho that I do not know how to achieve this. I was thinking that the client side code could detect what the url is and is placed as a page variable then the tool will displayed with a IF statement depending on what the page variable is. </p>
  
  <p><strong>Would my theory work or how can a achieve this in an efficient way?</strong></p>
  
  <p>Here is my main page code:</p>
  
  <pre><code>// Including Navbar and css
  import AdminLayout from '../comps/admin/adminLayout'
  
  // the so called "tools" more will exist in the future
  import Passform from '../comps/admin/tools/passform'
  
  
  // Fetching the current url the user is on
  var page = CURRENT_URL;
  
  
  const jumbotron = {
    background: 'white'
  }
  
  const Admin = (page) =&gt; (
  
    &lt;AdminLayout&gt;
  
    &lt;style global jsx&gt;
    {
      `body {
        background: #eff0f3;
      }`
    }
    &lt;/style&gt;
      &lt;div className="jumbotron" style={jumbotron}&gt;
  
      {(page == "passform") ? (
        &lt;Passform/&gt;
      ) : (
        &lt;h3&gt;Something is wrong :/ . {page}&lt;/h3&gt;
      )}
  
      &lt;/div&gt;
    &lt;/AdminLayout&gt;
  )
  
  export default Admin
  </code></pre>