Don’t understand why I keep getting the 404 error despite my URL path being correct.

This is what the errors look like:

FormSchema.tsx:49 
 POST http://localhost:3000/pages/api 404 (Not Found)

app-index.js:33 Failed to submit form: Error: HTTP error! status: 404
    at onSubmit (FormSchema.tsx:60:15)
    at async eval (index.esm.mjs:2229:1)

This is the structure of my code:

   /   

    ㄴ pages    

            ㄴ api      

                  ㄴroute.ts  

I am calling pages/api in my fetch function when the user clicks a submit button but I keep getting a 404 not found.. I checked in postman and it doesn’t work as well. This is what the function looks like:

async function onSubmit(values: z.infer<typeof FormSchema>) {
    try {
      const response = await fetch('/pages/api', {
        method: 'POST', 
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(values),
      });

      console.log('Response status:', response.status);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log('Form submission result:', result);

      toast({
        title: "Form submitted successfully!",
        description: (
          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
            <code className="text-white">{JSON.stringify(result, null, 2)}</code>
          </pre>
        ),
      });
    } catch (error) {
      console.error("Failed to submit form:", error);
      toast({
        title: "Error submitting form",
        description: "Please try again later.",
      });
    }
  }

I checked to see if anything was wrong with my URL, but it seems that isn’t the issue.