So, let's now connect everything.
And for this, in the front-end index.js file
I now really want to send a HTTP request
when the form is submitted.
So for this, here, I will use that fetch function.
And now we need the URL to which the request should be sent.
Now, since we will target this API route
the URL will be our current domain
and then just /API/feedback.
We don't need to encode our current domain here
because if we start with a slash here
this will automatically be appended
as a absolute path right after our domain.
So, it will be sent to the same domain automatically.
And then, there to the path /API/feedback targeting
that feedback file here.
Now, we want to configure this request though
and set the method to POST.
This is very important, so that we send
the post HTTP request because ,of course,
we're looking for these kinds
of requests here in our API route code.
Then, we also need to add our body.
So, the data that should be appended to the request.
And we do this with the body property.
Now, that data should be an object containing
the entered email and feedback, and it should be an object
with a email and a text property
because that's what we're trying
to access inside of our API route.
So, here I'll then just create my request body object,
let's say, with a email property of enteredemail
and a text property have enteredfeedback.
And then, that's the body I want to set here
but not as a standard JavaScript object,
but instead converted to JSON
with help of that JSON stringify method.
Now, we should also make it super clear
that we're sending JSON data by adding some special header
with help of the headers property, which takes an object,
where we add the content type header,
so a key of content type added to this header object,
which is set to application/json.
And my key name is wrapped between single quotes here
because I have a special character in this property name,
which wouldn't be allowed otherwise.
So, now we add this object to add metadata
to this request, which we're sending, informing the backend,
informing the API route in the end,
that this request will carry JSON data.
That is required for the API routes feature
for Next.js therefore to correctly parse
the incoming request body, and convert JSON to JavaScript
for us so that we can conveniently access
it as we're doing it here.
So, that's how we sent this request now.
And then, here we can also listen to the response
and extract the JSON data from that.
And then, work with that data,
and maybe just console lock the data for the moment.
So, we're just sending the request
and then, for the response, we're just extracting the data
and then logging the data, using the then methods here
because fetch returns a promise.
With all that done, if you save everything,
you should be able to go back to your page
and then enter any data of your choice here
and click Send Feedback.
And, now, to find out whether this worked
we can go to the feedback.json file.
And, in there, you should now have an array,
which does contain one object with a ID property,
which is set to some automatically created ID,
email, and text with values being equal
to the values you just entered here.
So, that was now updated automatically
because of our API route code here.
And if I send another feedback,
like does this work again from test2@test.com,
if I click Send Feedback and we have a look
at feedback.json again, we see now
that this was stored in there as well.
And it's this array, which is being updated over time here,
which gets longer and longer with more and more elements.
And this is all JSON data in there which is
why the property names are wrapped by double quotes.
It looks like JavaScript, like a JavaScript object,
and that's the entire idea behind JSON,
it's this JavaScript object notation,
but it isn't a JavaScript object.
It indeed just looks like it.
It is JSON formatted data
because that's what we're doing in the feedback API route.
And now, with that, we achieved something important.
Now, in our next application, we are also able
to work with submitted data,
we're not limited to just returning pages for get requests.
And that allows us to add features
like newsletter signup, feedback submission, comments
or any other kind of data that should be submitted maybe.
And you don't have to build a separate API
as a separate project, instead, you can easily
add API routes your website might need
as part of your Next.js project.
That's why API routes are a great and very useful feature.