I’m new to Next.js and server-side rendering, and I’m trying to get the individual slug for each job that I have posted. I am using the app router and have set up the following page: src/app/Job/[slug]page.js

Here’s the code:

async function getJobById(slug) {
  const response = await fetch(`http://localhost:3000/api/Job/${slug}`, {
    method: "GET",
  });

  return response.json();
}

export default async function JobId({ params }) {
  const { slug } = await getJobById(params.id);

  return (
    <>
      <h1>{slug.pay}</h1>
      <h1>{slug.aboutCompany}</h1>
      <h1>{slug.experience}</h1>
etc...
    </>
  );
}

I have several jobs posted, but when I attempt to click on one using this link located in the jobsCard.js <Link href={/Job/${slug}}>View job</Link>, I encounter numerous errors. Trying different solutions.

For reference heres the jobs api which is getting the list of jobs

import { useState, useMemo, useEffect } from "react";
import JobsCard from "./jobsCard.js";

const Jobs = () => {
  const [jobmaps, setJobs] = useState([]);

  useEffect(() => {
    async function fetchJobsCard() {
      try {
        const response = await fetch("/api");
        const data = await response.json();

        if (!response.ok) {
          throw new Error("Somethung went wrong");
        }

        setJobs(data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchJobsCard();
  }, []);

  return (
    <Container maxW={"6xl"}>
    
   
          {jobmaps.map((job, index) => (
            <JobsCard
              key={index}
              companyName={job.companyName}
              country={job.country}
              setting={job.setting}
              role={job.jobTitle}
              elevatorPitch={job.aboutCompany}
              experience={job.experience}
              pay={job.pay}
            />
          ))}
      
    </Container>
  );
};
export default Jobs;