So we got this feedback API route here
and now as part of that function,
I want to accept a incoming request
with the email and feedback data
and then store that somewhere in a database,
in a file or for development,
maybe also just in an array.
And therefore, to implement this,
we now have to do one important thing.
Inside of this handler function,
we have to find out which kind of request
is triggering this API route
because when we submit that form here,
I soon want to send a HTTP request with JavaScript
and I'll do this with the fetch function here.
We could also use third-party library like Axios.
That does not matter.
But I'll send the request from inside my JavaScript code.
And I will send a POST request
because I don't want to get data,
instead, I want to send data.
So we would typically use a POST
or maybe also a PUT request.
Now, since that's the goal,
here inside of that handler,
we need to find out which kind of request
is triggering this function execution
because by default,
all kinds of requests will trigger this function execution.
GET requests, POST requests, PUT, DELETE, everything.
Now, I only wanna try and extract data
from the request and store it in a database
or somewhere else if it's a POST request though.
So therefore here, we need a if check
and we need to find out which kind
of request was sent.
And that's easily done with help of that request object
which we get automatically by Next.js
when this function executes.
This will give us information
about the incoming request and for example,
there we'll have a method property,
which allows us to find out which HTTP method was used.
And we can simply check if that was a POST request here,
if it was a POST method.
And if that's the case,
then inside of this if check,
we could try to extract data
from the incoming request
and then store that extracted data in a database.
Now, let's say we expect our incoming POST requests
to this API route
to have this email and feedback text data field
in the request body.
That is something we could expect
because we're the ones writing the code for this API.
Then we can easily extract data from the incoming request
with help of more properties that exist
on this request object,
to be precise, with help of the body property,
which exists there.
This will be the already parsed body
of that incoming request.
So Next.js will automatically parse
the incoming request body for us,
so it will give us easy access to the data attached
to the request through that body property.
And then body will just be the value
that was sent with the request.
So let's say here in our front end,
we will soon send a request,
which carries a body of a JavaScript object
with an email field with some data
and with a text field with some feedback text data.
That could be the structure we wanna use
in this application.
And since we are the developer of this application,
of this website, we can, of course,
use any structure we want.
So now we would send this object
with a request to that API route.
So on that API route,
we could now expect that on this body,
we get our email with request.body.email
because we have an object as a body,
which has a email property.
And it also has a text property,
so we can extract that as well.
We can also get our feedbackText
by accessing request.body.text then.
So that's how we can extract the data
from the incoming request if it's a POST request
and then here we could store that in a database.
So here we could create a newFeedback object
where we add this email and text
and then maybe also add a unique ID
to have well, a unique identifier for every newFeedback.
And here during development,
I'll just create a new Date object
and convert that to a string.
It's not a perfect unique ID
because theoretically, two requests could be sent
and handled at exactly the same time
but during development, that's good enough.
It's a dummy ID we can use here.
So now we would create this feedback object
and we could now store that in a database
or in a file or anything like that.
Now, here during development,
I will store it in a file
and I'll create a new data folder,
the folder name is up to you though,
in my root project folder.
So not inside of pages, api,
you should not create it there
but just in my root project folder.
And in there, I'll add a feedback.json file,
the file name is up to you though,
and my goal is to open that file
and store my data in there
when we well, get that feedback.
For this, I, will import fs from fs.
So import the file system Node.js module
and we can use Node.js code here
because this will run on the server
and this will only run on the server,
never somewhere else
and it will be executed with Node.js.
So we can use all the Node.js features here
and I'll also import the path Node.js module here
and then here we can store that in a file
by constructing a path
with the join method to that data folder
and there the feedback.json file
by getting access to the current working directory
with process current working directory,
which will refer to the overall project directory.
Then diving into data
and then into feedback.json.
And this will create an absolute path
to that folder for us.
So that's my filePath then.
And then we can use the fs module to write to a file
and here I wanna write to that filePath
and then the data which I wanna write
is actually this data,
however, to be precise,
I actually wanna read the file first,
fetch the data which is in the file
and then override it with the updated data.
And therefore, to do that,
I'll first of all, read the file
and I'll do this with readFileSync
to do it a synchronous blocking way.
So I'll read that file here
and that gives me my fileData,
so the data which is currently stored in that file
and that will be some JSON data,
so I'll now convert to a JavaScript object to work with it
by executing JSON.parse fileData.
Then that data should be an array, let's say,
and therefore, I'll add an empty array
inside of this feedback.json file as a start.
So this is an empty array for now.
And then we interact with that array.
We know that it will be an array
because we own that file
and I push my need feedback into that array
and then I wanna write it back to the disk.
So then I use writeFile
and I'll use writeFileSync
to again do this in a blocking way here
and I'll write my file here
by again targeting that file
in that filePath and now the data which I write back
is again the data converted back to JSON
with the JSON.stringify method,
I pass in my updated data here
and that then writes the data to the disk.
That's the goal, that's how this should behave.
And then once we're done with all of that,
we wanna send back a response.
So then here I'll set a response of
or with a status code of 201,
which signals success, we added data successfully.
And then any data of our choice.
For example, an object sent back as JSON
where I say Success in my message property
and where I maybe also send back the newFeedback object
that was created.
So that will send back a response
after we successfully updated our file
and it sends back an object in JSON format
with a message and a feedback property.
This line of code would also execute though
after we go through this if check
because function execution does not stop
just because we set some response data.
Hence, to not send two responses,
which would cause problems,
we should move this code into an else block
so that this does not execute
if we just make it here into this if check.
Okay, so now we spent a lot time on that
but now we got some server-side code added
to this API route using API routes-specific features
like looking into the request,
extracting request body data
and running server-side code
and sending a response
and with all that added,
we can now connect our front end code
to that backend
by sending that request to that API route
to then see whether that works.