next.js - 現在の動的ページに基づいてNext.jsリンクを動的にする方法は?

Question

Next.js を使用して LMS を構築しています。これまでのところ、私のプロジェクト構造はlocalhost/courses/1. 各コースは 7 ページです。ダッシュボード、課題、TestAndQuizzes、Gradebook、リソース、お知らせ、名簿。すべてのコンポーネントとページの準備が整いました。したがって、手動でlocalhost/courses/1/assignmentsまたはに移動するとlocalhost/courses/1323/roster、正常に動作します。

私がやりたいこと: 課題のリンクをクリックすると、その特定のコースの課題ページに移動する必要がありますlocalhost/courses/1/assignments。現在、URL を にハードコーディングしている/courses/1/[page]ので、割り当てをクリックすると に移動しlocalhost/courses/1/assignment、名簿をクリックすると に移動しlocalhost/courses/1/rosterます。

ユーザーがコース内のタブのいずれかをクリックすると、その特定のコースのそのページに移動するように、そのルートを動的にするにはどうすればよいですか?

調べましたがnext/link、next/routerまだできません。何か助けはありますか？

編集：これが私のフォルダ構造です：

上で述べたように、今のところ、リンクを使用して/courses/1/assignment、たとえば誰かに送信しました。

サイトをチェックアウトしたい場合は、My appでホストされています。

import Image from 'next/image';
import tools from "./sidebarData";
import SideBarItem from "./SidebarItem";

function Sidebar() {
    return (
        <div className="flex mt-8 ml-20">
            <div className="">
                <ul>
                    {Object.entries(tools).map(([key, {title, url, icon}]) => (
                        <SideBarItem key={key} title={title} Icon={icon} url={url}/>
                    ))}
                </ul>

            </div>
        </div>
    )
}

export default Sidebar;

import Link from 'next/link';
import {useState, useEffect} from 'react';

function SidebarItem({title, Icon, url}) {

    const [currentUrl, setCurrentUrl] = useState('');
    
    useEffect(() => {
        setCurrentUrl(window.location.href);
    }), [];

    return (
        <div>
            <li className="flex mb-8 group">
                <div className="shadow-sm p-2 mr-3 rounded-lg"><Icon className="h-8 w-9 hover:animate-bounce" /></div>
                <Link href={`${url}`} ><a className="self-center cursor-pointer transition duration-100 transform hover:scale-125">{title}</a></Link>
            </li>
        </div>
    )
}

export default SidebarItem;

// 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"
    },
}