Now sending a request to the API route
works just as sending a request to any API,
to any backend works in react.
In our new meetup form component,
we call on add meetup on props
to pass our collected data there.
And in the end therefore we need to go
to the component that uses new meetup form
to work with that data.
And that is our new meetup page.
There, we have this add meetup handler
which gets this collected data.
And therefore it's here
where we now wanna send the request to our API route.
And we can send the request just as we know it,
for example with the built in fetch function
or with a third-party package like axis.
Now here I'll use the fetch function
and I wanna use async await,
so I will turn this into a async function
and await the response here.
And then we need to insert the URL
to which we want to send the request.
Now often that is some domain dot com
and then some path, if it's an external API,
but here it's of course an internal API,
which will be hosted by the same server as is being used
for serving this page.
And therefore we just can construct a absolute path here
to send the request to the same server
but a different path on that server.
And the path is slash API
because it's this special API folder and then the file name.
So slash meetup and you meet up without the file extension.
And if you name this Java script file differently here
you need to use a different name here as well.
This will now send the request
to this new meetup JS file in the API folder.
And it will then trigger this function.
NextJS will trigger this function for us
when a request reaches this path.
Now we actually do need to send a post request
because we're not doing anything
for different kinds of requests.
And hence, here, we need to use this second argument
which we can pass to fetch to configure this request.
And for example, we can set the method key to post here.
We then should also at the body,
the data attached to this request.
And that has to be a JavaScript object
which carries the data, which we wanna store
in our database, a title, a image, an address
and a description field.
Now here entered meetup data
which we're getting from new meetup form
does have those fields already.
It has a title, image address and description field.
And since that's the case,
in the end we can simply pass entered meetup data as a body.
However, not like this
but instead we need to convert it to JSON
which we can do with the built in JSON stringify method.
Then we can also add some headers to make it clear
that we're sending JSON data
by adding the content type header
and setting this to application JSON.
And with that, our request is configured and will be sent.
Eventually we then get a response
and we can then also get data from that response
if we want to
just like this
as we always do it for responses we get
from the fetch function.
And then we can work with that data,
but here I'm not interested in it.
So we'll just log that data.
If we do all of that, if we save all the files
and if we ensured that MongoDB white listed our local IP
and that the credentials
for connecting to the database are correct.
If we did all of that, we should be able to go back
to our form here and reload, open to dev tools
and then enter our data here, like a first meetup.
And then I will again, wrap this URL
which I picked before
and insert this here as a image
and then some address, some street five, some city.
And this is a first meetup as a description.
And if I now click add meetup
we see this response eventually, which is looking good
because meetup inserted is the message we're sending back
from the API route.
And if we go to MongoDB
to our cluster and click on collections
there we should then actually also see a meetup data base.
And you might not see the other databases here
because I traded more databases in this cluster
but you should see a meetups database
with a meetups collection.
And in there you should see one meetup with the data
you just added.
And an automatically generated ID.
And that's our API route in action
and how we can send a request to it.
Now, of course, we now probably wanna navigate away
after we added a meetup
and therefore back in the new meetup page here.
So not the API route, but the front end facing page.
After we got our response here
we might wanna navigate away programmatically.
And we learned how that worked.
We can use the use router hook
and import it from next router therefore,
to get access to that router object.
And once we got that here after logging
maybe we can navigate away with the push method
or here maybe also with the replace method
to make sure we can't go back with the back button.
If you want to ensure that that's not possible.
Here I don't wanna do that.
And hence, I'll just push this
and then go back to just slash nothing.
So to the starting page, let's say,
and then with that if we save this
and I then enter a second meetup here
and the image link again,
second street two.
This is the second street.
If we do all of that click add meetup
you see eventually we're navigated away.
And of course we could also show a loading spinner
and do all of that
but that's then all just client site standard react
nothing NextJS specific about it.
The NextJS specific part was this API route.
And as you see that route is now working just fine.