migs:~/nextjs$ npx create-next-app@latest
✔ What is your project named? … nodemailer
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? …  Yes
✔ Would you like to use `src/` directory? …  Yes
✔ Would you like to use App Router? (recommended) …  Yes
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /home/migs/nextjs/nodemailer.

file structure included. Tried with /pages/api/test.ts and /api/test.ts inside the src directory, and inside app

both test.ts files are identical:

import { NextApiRequest, NextApiResponse } from "next";

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  console.log(req);
  return res.status(200).json({ name: "miggy" });
};

export default handler;

my fetch example:

"use client";
import { useEffect } from "react";

export default function Home() {
  const MakeFetch = async () => {
    try {
      const rawRes = await fetch("/api/test");
      console.log(rawRes);
      rawRes.status ? console.log(rawRes.status) : null;
      const res = await rawRes.json();
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  };

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

  return (
    <>
      <div>hi</div>
      <button onClick={MakeFetch}>refetch</button>
    </>
  );
}

I have tried await fetch("/api/test") await fetch("pages/api/test")
and a whole wide range of things I could think of.

At this point i'm wondering if its because I don't have proper request methods set up I.E. GET/POST, but it looks like from the docs, this should work.

Can someone please tell me why all i'm getting is 404 errors?