So let's add the API route
to what you want to talk here.
You learned that API routes are added by going
to the pages folder and then in there, the API folder,
and then in there, the contact.js file.
Now, that file name is up to you,
but this leads to a route of /api/contact
to which we can send requests to reach this API route.
Now in there, we should just set up a function,
typically called handler, which is exported,
and hence, of course,
the function name doesn't actually matter.
This function, as you learned,
receives a request and a response object
and it only executes on the server-side.
It's never included in any client-side code,
and here we can then handle the incoming request,
check the request method, extract data from the request,
and do whatever we need to do,
and that's what I'll do here.
I'll first of all, check if request method is equal to POST,
because I want to submit this contact form
with a POST request.
So any other requests will be ignored
and will not do anything.
So if the request method is POST, then we'll continue.
As a first step, I want to extract data
from the body of that request.
Now, thankfully, as we learned, Next.js
will automatically parse that body for us,
so we have this request body property,
which holds the request body,
and we can now just get data out of that,
for example, with object de-structuring,
and we could expect that we have a email,
a name, and a message field in that body.
We have to make sure that we add those fields
to the request body when we send the request
from the front-end later,
but here I'll assume that I have a email,
a name, and a message property in my request body.
Now we can validate that, because you learned
that you should not trust client-side validation
because that can always be disabled or tricked.
So here I then check if we don't have a email,
or email does not include a at sign
by adding a exclamation mark here,
or we don't have a name,
or if we trim the name it's equal to an empty string,
or we don't have a message,
or if we trim message, it's an empty string.
If either of these conditions is met
then we don't continue.
Then I'll return to stop function execution
and I'll send back a response
with that response object, as you learned.
There we can call status to set a status code
and set this to 422, for example,
and then I'll do call JSON on that
to add some data in JSON format,
which is the defacto standard format for exchanging data
with APIs, to add some data to the response,
and here we pass a object
where we could add a message property and say,
invalid input, something like this.
Okay, now, if we make it past this if check,
we have valid data,
and then we want to store it in a database.
Now that will be step number two, for the moment,
I'll just add a new message object here
and just add my email, name, and message here,
and then just console.log it,
but later we will also store it in a database,
just as we did it before in the course already,
but for the moment, that's it,
and of course, I'll send back a response
where I set the status code to 201,
which means that it was a success and we added a resource.
We stored the message,
even though technically we didn't yet,
and then maybe also a message here,
successfully stored message,
and also, maybe send back the message if we want to.
It's of course, up to you
which kind of data you want to send back,
and with that, we're done with that API route.
Now, before we connect the database,
let's make sure we do add the front-end code
for sending requests to it.