The api routes are not being called on Next js

Question

I cloned this https://github.com/naufaldi/next-landing-vpn/tree/main repo and trying to add backend to it.

So this is my folder structure. There was no app directory. so I added it and made a route. But whenever I call the route

const response = await fetch("/api/sendEmail", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(e.target),
    });

It gives me 404 not found error. I also tried moving the api directory inside pages but still the same error.

here's my route.js file

  export async function POST(req, res){
  try {

    console.log(req.json())
   
  } catch (e) {
    console.log(e)
  }
}

I cannot seem to call the api routes in any way. Where am i supposed to put the api routes Or am i missing any thing else?

I am using "next": "^12.3.4"