Client side data fetching with SWR from internal API route

Question

I'm trying to fetch the data i get to an API route in my Next.js app but it doesn't work.

Here's my code on my API route where i get the data:

import nc from "next-connect";

const jobHandler = nc();
jobHandler.get((req, res) => {
  res.status(200).send("Get a job");
});

jobHandler.post((req, res) => {
  console.log(`webhook received: ${JSON.stringify(req.body)}`); //<---- HERE is the console log
  
  req.json(req.body);
  res.sendStatus(200); //.json(req.body);
});

export default jobHandler;

and this is what i get in console.log:

Now when i try to fetch the these data in my client side using SWR like this:

import useSWR from "swr";

const fetcher = async () => {
  const response = await fetch(`/api/job`);
  const data = await response.json();
  console.log("PREJ TE FETCHER", data);
  return data;
};

function AsyncForm(props) {
  
  const { data, error } = useSWR("job", fetcher);

  console.log("job prej indexi", data); //<-- This is undefined

  return (
    <>
      {data ? (<p>{data}</p>) : (<p>loading...</p>)}
    </>
  );
}

export default AsyncForm;

i get undefined.

What am i doing wrong here? how to fetch that object of data which i get on my /api/job route?