title: How to make Next.js links dynamic based on current dynamic page?
body: <p>I am building an LMS using Next.js. So far my project structure is <code>localhost/courses/1</code>. Every course will have 7 pages. Dashboard, Assignment, TestAndQuizzes, Gradebook, Resources, Announcements, and Roster. I have all the components and pages ready. So if I manually go to <code>localhost/courses/1/assignments</code> or <code>localhost/courses/1323/roster</code>, etc. works fine.</p>
  <p>What I want to do is: When I click on the assignment link, I need to go to the assignment page of that specific course - something like <code>localhost/courses/1/assignments</code>. Currently, I have hard-coded the URL to <code>/courses/1/[page]</code> so if I click assignments it will go to <code>localhost/courses/1/assignment</code> or if I click roster it will go to <code>localhost/courses/1/roster</code>.</p>
  <p>How do I make that route dynamic so that when users click on one of the tabs inside a course, it takes them to that page of that specific course?</p>
  <p>I looked up <code>next/link</code> and <code>next/router</code> but I still am not able to do that.
  Any help?</p>
  <p>Edit: Here is my folder structure:</p>
  <p><a href="https://i.stack.imgur.com/1UGfs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1UGfs.png" alt="enter image description here" /></a></p>
  <p>Like I said above, for now I have used the links to send someone to <code>/courses/1/assignment</code> for example.</p>
  <p>If you want to check out the site it is hosted at <a href="https://osm-sagarsubedi.vercel.app" rel="nofollow noreferrer">My app</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Image from 'next/image';
  import tools from "./sidebarData";
  import SideBarItem from "./SidebarItem";
  
  function Sidebar() {
      return (
          &lt;div className="flex mt-8 ml-20"&gt;
              &lt;div className=""&gt;
                  &lt;ul&gt;
                      {Object.entries(tools).map(([key, {title, url, icon}]) =&gt; (
                          &lt;SideBarItem key={key} title={title} Icon={icon} url={url}/&gt;
                      ))}
                  &lt;/ul&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Sidebar;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Link from 'next/link';
  import {useState, useEffect} from 'react';
  
  function SidebarItem({title, Icon, url}) {
  
      const [currentUrl, setCurrentUrl] = useState('');
      
      useEffect(() =&gt; {
          setCurrentUrl(window.location.href);
      }), [];
  
      return (
          &lt;div&gt;
              &lt;li className="flex mb-8 group"&gt;
                  &lt;div className="shadow-sm p-2 mr-3 rounded-lg"&gt;&lt;Icon className="h-8 w-9 hover:animate-bounce" /&gt;&lt;/div&gt;
                  &lt;Link href={`${url}`} &gt;&lt;a className="self-center cursor-pointer transition duration-100 transform hover:scale-125"&gt;{title}&lt;/a&gt;&lt;/Link&gt;
              &lt;/li&gt;
          &lt;/div&gt;
      )
  }
  
  export default SidebarItem;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// export tool names and URLs
  import {
      AcademicCapIcon,
      HomeIcon,
      BookOpenIcon,
      UserGroupIcon,
      SpeakerphoneIcon,
      FolderOpenIcon,
      QuestionMarkCircleIcon
  
  } from "@heroicons/react/outline";
  
  export default{
      goToHome:{
          title: 'Home',
          url: '/courses/1/',
          icon: HomeIcon,
          component : "dashboard"
      },
      goToAsignments:{
          title: 'Assignments',
          url: '/courses/1/assignments',
          icon: AcademicCapIcon,
          component : "assignment"
      },
      goToTestQuizzes:{
          title: 'Test and Quizzes',
          url: '/courses/1/testAndQuizzes',
          icon:QuestionMarkCircleIcon,
          component : "testAndQuizzes"
      },
      goToGradeBook:{
          title: 'Gradebook',
          url: '/courses/1/gradebook',
          icon:BookOpenIcon,
          component : "gradebook"
      },
      goToResources:{
          title: 'Resources',
          url: '/courses/1/resources',
          icon: FolderOpenIcon,
          component : "resources"
      },
      goToAnnouncements:{
          title: 'Announcements',
          url: '/courses/1/announcements',
          icon:SpeakerphoneIcon,
          component : "announcements"
      },
      goToRoster:{
          title: 'Roster',
          url: '/courses/1/roster',
          icon:UserGroupIcon,
          component : "roster"
      },
  }</code></pre>
  </div>
  </div>
  </p>