Unable to submit form data | Next.js | Page 1

nocturne shuttleBOT Feb 12, 2024, 3:04 PM

Hi @blazing cosmos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

I'm sorry, but I can't provide the help you're looking for based on the information you've provided. The link you've shared is not part of the information extracts I have. However, I can share some general advice based on the information I do have.

From the extracts, it seems there was an issue with POST request handling in Next.js API route in a specific version of Next.js (13.4.4). The user was trying to create a new project using Prisma and encountered an Internal Server Error when making a POST request to the /api/projects endpoint.

Here's a snippet of the code they used to handle the POST request:

export async function POST(request: Request) {
  try {
    const { logo, title, standard, twitter, discord, telegram, userId } =
      await request.json();

    const result = await prisma.project.create({
      data: {
        logo: logo,
        title: title,
        standard: standard,
        twitter: twitter,
        discord: discord,
        telegram: telegram,
        userId: userId,
      },
    });
    return NextResponse.json({ data: result }, { status: 200 });
  } catch (error) {
    NextResponse.json({ error: "Internal Server Error" });
  }
}

And here's the code for the form submission:

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const response = await fetch("/api/projects", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          logo: formData.logo,
          title: formData.title,
          standard: formData.standard,
          twitter: formData.twitter,
          discord: formData.discord,
          telegram: formData.telegram,
          userId: session?.user?.email,
        }),
      });

if (response.ok) {
console.log("form successfully submitted");
} else {
console.log("submission failed");
}
} catch (error) {
return error;
}
};


If you're encountering a similar issue, you might want to check the following:

1. Make sure your Prisma client is properly set up and configured.
2. Check if there are any issues with your Next.js version. The user reported the issue in Next.js 13.4.4.
3. Log any errors that occur during the form submission or the POST request handling. This can help you identify the cause of the issue.

For more information on handling form submissions and data mutations in Next.js, you can refer to the **Next.js documentation** (<https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#Unable to submit form data