Im trying to make an API that check in a folder to check for folder names to return me those names.
But the problem i keep running in is the fact that i keep getting hit by a 404 when calling the api using fetch.

Important to note i am using nextron but this part should be fully nextjs.

pages/_app.jsx

import { useState, useEffect, Fragment } from "react";
import "../css/mainpage.css";

export default function HomePage() {
  const [chats, setChats] = useState([]);

  useEffect(() => {getChatList();}, []);

  async function getChatList() {
    var req = await fetch("/api/fetchchats")
      .then((res) => console.log(res))
  }

  return (
    <Fragment>
      <div>
        <header>
          <h1 className="flex items-center justify-center text-[40px] pt-[20px]">Welcome back sir,</h1>
          <p>Select chat:</p>
          <div>

          </div>
        </header>
      </div>
    </Fragment>
  );
}

/page/api/fetchchats/route.js

import fs from "fs";
import path from "path";

export default function GET(req, res) {
    const parentDirectoryPath = path.join(process.cwd(), 'chats');
    console.log(parentDirectoryPath);
  
    fs.readdir(parentDirectoryPath, (err, files) => {
      if (err) {
        return res.status(500).json({ error: 'Unable to scan directory' });
      }
  
      // Filter out only directories
      const folderList = files.filter(file => fs.lstatSync(path.join(parentDirectoryPath, file)).isDirectory());
  
      res.status(200).json(folderList);
    });
  }

I am kind of at a loss as to why i keep getting 404's