Original subtitles

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.