router.push to index.js works locally but not in Vercel

[e-rmkt]

Hello,
we are currently working on implementing a form to create a new trip. We created a form element with various input fields, a create button and cancel Link styled as a button. If the user clicks on Create, then they should be redirected to the pages/index.js page via onSubmit to see their changes. We used a handler function for this, that looks like this:

async function handleAddTrip(event) {
    event.preventDefault();
   
 const formData = new FormData(event.target);
    const tripData = Object.fromEntries(formData);

    const newTrip = {
      title: tripData.title,
      location: [{ country: tripData.country, city: tripData.city }],
      timePeriod: [
        { startDate: tripData.startDate, endDate: tripData.endDate },
      ],
    };

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

    if (!response.ok) {
      console.error(response.status);
      return;
    }

    mutate();
    router.push("/");
  }

This works great locally. The behavior works as expected, after clicking create we are redirected to pages/index.js. But on production this behavior breaks somehow. When clicking create, the values from the input fields get pushed to backend and a new trip is created, but we stay on the form page.

After a bit of googling and trying, we don't really understand why that is. This error occured after we changed the redirection method to router.push(). Before that we used window.location.href = "/"; and it worked fine both locally and on production. But as far as we know, using routing is the better practice, so we would like to work through this bug instead of just reverting to what worked before.

Upon investigating further, the console throws a 405 error when we try to create a trip.

POST https://capstone-project-travel-app.vercel.app/api/trips net::ERR_ABORTED 405
TripForm-31553e5c8ae61894.js:1     
n @ TripForm-31553e5c8ae61894.js:1
eU @ framework-305cb810cde7afac.js:9
eH @ framework-305cb810cde7afac.js:9
(anonymous) @ framework-305cb810cde7afac.js:9
re @ framework-305cb810cde7afac.js:9
rn @ framework-305cb810cde7afac.js:9
(anonymous) @ framework-305cb810cde7afac.js:9
oP @ framework-305cb810cde7afac.js:9
eF @ framework-305cb810cde7afac.js:9
ro @ framework-305cb810cde7afac.js:9
nU @ framework-305cb810cde7afac.js:9
nD @ framework-305cb810cde7afac.js:9
TripForm-31553e5c8ae61894.js:1 
405

This could possibly come from this:

import connect from "@/db/connect";
import Trip from "@/db/models/Trip";

export default async function handler(request, response) {
  await connect();

  if (request.method === "GET") {
    const trips = await Trip.find();
    return response.status(200).json(trips);
  }

  if (request.method === "POST") {
    try {
      const tripData = request.body;
      await Trip.create(tripData);

      response.status(201).json({ status: "Trip created" });
    } catch (error) {
      response.status(400).json({ message: error.message });
    }
  }
  return response.status(405).json({ message: "Method not allowed" });
}

Take a look at production here.
This is the PR we worked on.
This is our repository in case you want to try it locally.

Of course, to make matters a little worse, we got confused in the agile process and already merged the PR thinking it went through QA when it just went through Code Review instead.

Many thanks in advance!

[ahohnsen]

Hey there 👋🏼

The issue actually doesn't lie with the redirection using router.push.

When I add a trip, it appears in the console as if the POST was unsuccessful, and I receive a 405 error. In the VS Code terminal, the following error message is displayed: "error Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client." This error occurs when attempting to modify the headers of the HTTP response after sending a response.

If we look at the code in /pages/api/trips, it seems like response.status(405).json({ message: "Method not allowed" }); is always executed at the end of the handler, regardless of whether any of the two previous if conditions were met or not. You could rewrite the handler as follows to ensure that only one response is sent at a time:

export default async function handler(request, response) {
  await connect();

  if (request.method === "GET") {
    const trips = await Trip.find();
    return response.status(200).json(trips);
  } else if (request.method === "POST") {
    try {
      const tripData = request.body;
      await Trip.create(tripData);

      response.status(201).json({ status: "Trip created" });
    } catch (error) {
      response.status(400).json({ message: error.message });
    }
  } else {
    return response.status(405).json({ message: "Method not allowed" });
  }
}