All language subtitles for 006 Sending Requests To API Routes_Downloadly.ir_en

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.