Why am i getting a status 400 after submitting my form? - api

Question

I am trying to develop a simple app with Next.js but i am having issues with learning how to create an api.
This is my component to add an event with a form and a submit method that fetchs the data from the api.
import React from 'react'
import Layout from '#/components/Layout'
import styles from '#/styles/AddEvent.module.css'
export default function AddEventPage() {
const submitHanlder = (e) => {
e.preventDefault();
const formData = {
title: e.target.title.value,
description: e.target.description.value
}
fetch('/api/events', {
method: 'POST',
body: JSON.stringify(formData)
});
console.log(formData)
}
return (
<Layout title='Add New Event'>
<h1>Add Event</h1>
<div className={styles.container}>
<form className={styles.form} action="" onSubmit={submitHanlder}>
<label className={styles.label} >Title</label>
<input type="text" name="title" />
<label className={styles.label} >Description</label>
<input type="text" name="description"/>
<label className={styles.label}htmlFor="">Date</label>
<input type="date" />
<button type='submit' >Submit</button>
</form>
</div>
</Layout>
)
}
And this is my api/events.js:
const handler = (req , res) => {
if(req.method === 'POST'){
return res.status(201).json({ message: 'evento agregado' });
}
return res.status(400).json({ error: 'no se pudo agregar el evento' });
}
export default handler;
It is a simple handler that returns a message depending on the request method, but i am always getting the status 400 with the error message.
This is my request in the browser console:
{"title":"asdasd","description":"asdasdas"}
And my response:
message "evento agregado"
So it seems that is working. But when i go to localhost:3000/api/events it shows the following:
error "no se pudo agregar el evento"

Answer 1

You could try to print out what req.method is when the api gets called.
Add the following statement:
console.log(req.method)`
Then have a look at what the server logs out.

Answer 2

When you try to open localhost:3000/api/events in your browser the browser makes a GET Request, not a POST Request, to your api. That is the default behavior when opening a 'website'.
If you want to test your api you could use Postman or an extension for Visual Studio Code. The REST Client from Visual Studio Marketplace would probably be an option.