I’m encountering an issue with my Next.js application where a POST request to an API route results in a 404 error. Here are the details of my setup:

/src
  /app
    /api
      /addroute
        route.js
    /addRoute
      /page.js
      /components
        MapComponent.js

API Route (/src/app/api/addroute/route.js)

import { NextApiRequest, NextApiResponse } from 'next';
import firebaseAdmin from 'firebase-admin';

if (!firebaseAdmin.apps.length) {
  const serviceAccount = require('../../../../credentials/sdkfirebase.json');
  firebaseAdmin.initializeApp({
    credential: firebaseAdmin.credential.cert(serviceAccount)
  });
}

const db = firebaseAdmin.firestore();

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const data = req.body;
      console.log('Received data:', data);
      const docRef = await db.collection('routes').add(data);
      res.status(200).json({ message: 'Route added successfully', route_id: docRef.id });
    } catch (error) {
      console.error('Error adding route:', error);
      res.status(500).json({ error: error.message });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Client-Side Form Submission (/src/app/addRoute/page.js)

"use client";

import { useState } from 'react';
import MapComponent from '../components/MapComponent';
import styles from '../addRoute/addRoute.module.css';

export default function AddRoutePage() {
  const [routeName, setRouteName] = useState('');
  const [routeColor, setRouteColor] = useState('#000000');
  const [routeDescription, setRouteDescription] = useState('');
  const [routeCoordinates, setRouteCoordinates] = useState([]);

  const handleColorChange = (e) => {
    setRouteColor(e.target.value);
  };

  const handleMapClick = (coordinates) => {
    setRouteCoordinates(coordinates);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = {
      routeName,
      routeColor,
      routeDescription,
      routeCoordinates,
    };

    console.log('Form Data:', formData);

    try {
      const response = await fetch('/api/addroute', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

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

      if (!response.ok) {
        const errorText = await response.text();
        console.error('Error Response Text:', errorText);
        throw new Error(`Failed to submit route: ${response.statusText} - ${errorText}`);
      }

      const data = await response.json();
      console.log('Route submitted successfully:', data);
    } catch (error) {
      console.error('Error submitting route:', error);
    }
  };

  return (
    <div className={styles.container}>
      <h1>Add Route</h1>
      <form onSubmit={handleSubmit}>
        <div className={styles.formGroup}>
          <label htmlFor="routeName" className={styles.label}>Route Name:</label>
          <input
            type="text"
            id="routeName"
            value={routeName}
            onChange={(e) => setRouteName(e.target.value)}
            className={styles.inputField}
            required
          />
        </div>
        <div className={styles.formGroup}>
          <label htmlFor="routeColor" className={styles.label}>Route Color:</label>
          <input
            type="color"
            id="routeColor"
            value={routeColor}
            onChange={handleColorChange}
            className={styles.colorPicker}
            required
          />
        </div>
        <div className={styles.formGroup}>
          <label htmlFor="routeDescription" className={styles.label}>Description:</label>
          <textarea
            id="routeDescription"
            value={routeDescription}
            onChange={(e) => setRouteDescription(e.target.value)}
            className={styles.textareaField}
            rows="4"
          />
        </div>
        <div className={styles.mapSection}>
          <MapComponent onMapClick={handleMapClick} />
        </div>
        <button type="submit" className={styles.submitButton}>Submit</button>
      </form>
    </div>
  );
}

When I attempt to submit the form, I receive the following error in the console:

POST http://localhost:3000/api/addroute 404 (Not Found)
Error submitting route: Error: Failed to submit route
    at handleSubmit (page.js:45:15)

I verified the file structure,
confirmed the API route path is correct,
added logging on both client and server sides to inspect the data,
checked network requests in the browser’s developer tools;
everything is correct but I still getting these errors.