I am rendering a webpage in frontend, taking the data for webpage from the database. Right now I have hard coded the route for a perticular webpage, but I want to make it dynamic as there are multiple webpages in the db and also dynamically render them on nextjs with unique url.

Following is the code for rendering the webpage

import React, { useEffect, useState } from "react";
import axios from "axios";
import NavigationBar from "../../components/Navbar"
import Footer from "../../components/Footer";
// import { useParams } from "react-router";

export default function Webpage() {
  // let { slug }: any = useParams();
  const [webpage, setWebpage] = useState("");
  // console.log(slug, "slug")
  useEffect(() => {
    async function renderPage() {
      const response = await axios.get(
        "http://localhost:8080/dfsk-ec35-docs"
      );
      setWebpage(response.data);
    }
    renderPage();
  }, []);
  
  return (
    <div>
      {/* Navigation bar component */}
      <NavigationBar type="main"/>
      {/* rendering the web page */}
      <div dangerouslySetInnerHTML={{ __html: webpage}} />
      {/* Footer component */}
      <Footer />
    </div>
  );
}

Following is the code I have for dynamic routes.

import { useRouter } from "next/dist/client/router";
import Webpage from "./webpage"
export default function WebpageId(){
 const router = useRouter()
 const  pid  = router.query.id
    return(
        <div>page: {pid}</div>
        // <Webpage/>
    )
}