import fs from "fs";
import path from "path";
import type { NextApiRequest, NextApiResponse } from "next";

const GET = (req: NextApiRequest, res: NextApiResponse) => {
  const directoryPath = "G:\\";
  if (req.method == "GET") {
    try {
      const files = fs
        .readdirSync(directoryPath, { withFileTypes: true })
        .filter((dirent) => dirent.isDirectory())
        .map((dirent) => dirent.name);
      console.log(files);
      res.status(200).json({ files });
    } catch (error) {
      res.status(500).json({ error: "Unable to retrieve directory contents" });
    }
  }
};

export { GET };

"use client";

import { Button } from "@nextui-org/button";
import { useEffect, useState } from "react";

export default function Dirs() {
  const [dirs, setDirs] = useState<string[]>([]);

  useEffect(() => {
    fetch("/api/dirs", { method: "GET" }) // <--- this is where the error occurs
      .then((response) => response.json())
      .then((data) => setDirs(data.files))
      .catch((err) => console.error(err));
  }, [dirs]);

  const listItems: any[] = [];
  dirs.forEach((file) => {
    console.log(file);
    listItems.push(<li key={file}>{file}</li>);
  });

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>
        <Button>Click me</Button>
        <ul>{listItems}</ul>
      </div>
    </main>
  );
}