title: Nextjs Folder Routing Inside Pages Sub-Folder
body: <p>I am new to Nextjs and Stackoverflow so I will try to describe my issue as best as possible.</p>
  <p>I have created the following folder structure in my project:</p>
  <ul>
  <li>pages
  <ul>
  <li>api folder</li>
  <li>index.js</li>
  <li>sys-admin folder
  <ul>
  <li>createvenue.js</li>
  <li>createuser.js</li>
  <li>index.js</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>Inside sys-admin&gt;index.js, I have a button with an onClick handler that uses next/router to push to the createvenue.js route. When I type in the URL http://localhost:3000/sys-admin/createvenue, I can see the createvenue.js page however, when I click the button in the http://localhost:3000/sys-admin page, I am directed to http://localhost:3000/createvenue which gives me a 404. My understanding was that the folder name (in this case sys-admin) would become the root and would be added to the router path to make the URL http://localhost:3000/sys-admin/createvenue.</p>
  <p>Here is my sys-admin&gt;index.js code:</p>
  <pre><code>import { useRouter } from &quot;next/router&quot;;
  
  export default function CreateCustomer() {
    const router = useRouter();
    const handleSubmit = () =&gt; {
      router.push(&quot;/createvenue&quot;);
    };
    return (
      &lt;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;button className=&quot;btn btn-filled&quot;&gt;Create New Customer&lt;/button&gt;
        &lt;/form&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Here is my createvenue.js code:</p>
  <pre><code>import { useRouter } from &quot;next/router&quot;;
  
  export default function CreateVenue() {
    const router = useRouter();
    const handleSubmit = () =&gt; {
      router.push(&quot;/createusers&quot;);
    };
    return (
      &lt;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Enter venue name&quot; /&gt;
          &lt;button className=&quot;btn btn-filled&quot;&gt;Next&lt;/button&gt;
        &lt;/form&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>I've also tried adding /sys-admin to router.push(&quot;/sys-admin/createvenue&quot;); but it still doesn't work.</p>
  <p>Is there a way to get next/router to add the sys-admin root to the URL?</p>