Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:04,500
Now sending a request to the API route
2
00:00:04,500 --> 00:00:08,450
works just as sending a request to any API,
3
00:00:08,450 --> 00:00:11,470
to any backend works in react.
4
00:00:11,470 --> 00:00:14,700
In our new meetup form component,
5
00:00:14,700 --> 00:00:17,410
we call on add meetup on props
6
00:00:17,410 --> 00:00:20,030
to pass our collected data there.
7
00:00:20,030 --> 00:00:22,430
And in the end therefore we need to go
8
00:00:22,430 --> 00:00:25,260
to the component that uses new meetup form
9
00:00:25,260 --> 00:00:27,090
to work with that data.
10
00:00:27,090 --> 00:00:29,830
And that is our new meetup page.
11
00:00:29,830 --> 00:00:32,350
There, we have this add meetup handler
12
00:00:32,350 --> 00:00:34,750
which gets this collected data.
13
00:00:34,750 --> 00:00:35,920
And therefore it's here
14
00:00:35,920 --> 00:00:39,620
where we now wanna send the request to our API route.
15
00:00:39,620 --> 00:00:42,680
And we can send the request just as we know it,
16
00:00:42,680 --> 00:00:45,250
for example with the built in fetch function
17
00:00:45,250 --> 00:00:48,403
or with a third-party package like axis.
18
00:00:49,250 --> 00:00:51,300
Now here I'll use the fetch function
19
00:00:51,300 --> 00:00:52,900
and I wanna use async await,
20
00:00:52,900 --> 00:00:55,920
so I will turn this into a async function
21
00:00:55,920 --> 00:00:59,400
and await the response here.
22
00:00:59,400 --> 00:01:02,270
And then we need to insert the URL
23
00:01:02,270 --> 00:01:04,473
to which we want to send the request.
24
00:01:05,420 --> 00:01:10,110
Now often that is some domain dot com
25
00:01:11,780 --> 00:01:15,570
and then some path, if it's an external API,
26
00:01:15,570 --> 00:01:18,660
but here it's of course an internal API,
27
00:01:18,660 --> 00:01:22,260
which will be hosted by the same server as is being used
28
00:01:22,260 --> 00:01:24,150
for serving this page.
29
00:01:24,150 --> 00:01:28,840
And therefore we just can construct a absolute path here
30
00:01:28,840 --> 00:01:31,140
to send the request to the same server
31
00:01:31,140 --> 00:01:34,110
but a different path on that server.
32
00:01:34,110 --> 00:01:37,360
And the path is slash API
33
00:01:37,360 --> 00:01:41,150
because it's this special API folder and then the file name.
34
00:01:41,150 --> 00:01:45,983
So slash meetup and you meet up without the file extension.
35
00:01:47,330 --> 00:01:50,090
And if you name this Java script file differently here
36
00:01:50,090 --> 00:01:52,773
you need to use a different name here as well.
37
00:01:53,780 --> 00:01:55,290
This will now send the request
38
00:01:55,290 --> 00:01:58,640
to this new meetup JS file in the API folder.
39
00:01:58,640 --> 00:02:00,980
And it will then trigger this function.
40
00:02:00,980 --> 00:02:03,950
NextJS will trigger this function for us
41
00:02:03,950 --> 00:02:06,353
when a request reaches this path.
42
00:02:07,890 --> 00:02:11,050
Now we actually do need to send a post request
43
00:02:11,050 --> 00:02:12,800
because we're not doing anything
44
00:02:12,800 --> 00:02:15,300
for different kinds of requests.
45
00:02:15,300 --> 00:02:18,170
And hence, here, we need to use this second argument
46
00:02:18,170 --> 00:02:22,480
which we can pass to fetch to configure this request.
47
00:02:22,480 --> 00:02:25,823
And for example, we can set the method key to post here.
48
00:02:26,810 --> 00:02:28,600
We then should also at the body,
49
00:02:28,600 --> 00:02:31,110
the data attached to this request.
50
00:02:31,110 --> 00:02:34,060
And that has to be a JavaScript object
51
00:02:34,060 --> 00:02:36,770
which carries the data, which we wanna store
52
00:02:36,770 --> 00:02:40,470
in our database, a title, a image, an address
53
00:02:40,470 --> 00:02:41,883
and a description field.
54
00:02:42,980 --> 00:02:44,840
Now here entered meetup data
55
00:02:44,840 --> 00:02:47,200
which we're getting from new meetup form
56
00:02:47,200 --> 00:02:49,770
does have those fields already.
57
00:02:49,770 --> 00:02:53,720
It has a title, image address and description field.
58
00:02:53,720 --> 00:02:55,110
And since that's the case,
59
00:02:55,110 --> 00:02:58,960
in the end we can simply pass entered meetup data as a body.
60
00:02:58,960 --> 00:03:00,140
However, not like this
61
00:03:00,140 --> 00:03:02,870
but instead we need to convert it to JSON
62
00:03:02,870 --> 00:03:06,423
which we can do with the built in JSON stringify method.
63
00:03:07,910 --> 00:03:10,830
Then we can also add some headers to make it clear
64
00:03:10,830 --> 00:03:13,550
that we're sending JSON data
65
00:03:13,550 --> 00:03:15,820
by adding the content type header
66
00:03:15,820 --> 00:03:18,013
and setting this to application JSON.
67
00:03:19,130 --> 00:03:22,571
And with that, our request is configured and will be sent.
68
00:03:22,571 --> 00:03:25,470
Eventually we then get a response
69
00:03:25,470 --> 00:03:28,520
and we can then also get data from that response
70
00:03:28,520 --> 00:03:30,300
if we want to
71
00:03:30,300 --> 00:03:31,133
just like this
72
00:03:31,133 --> 00:03:33,020
as we always do it for responses we get
73
00:03:33,020 --> 00:03:35,260
from the fetch function.
74
00:03:35,260 --> 00:03:37,450
And then we can work with that data,
75
00:03:37,450 --> 00:03:39,270
but here I'm not interested in it.
76
00:03:39,270 --> 00:03:41,563
So we'll just log that data.
77
00:03:42,899 --> 00:03:46,440
If we do all of that, if we save all the files
78
00:03:46,440 --> 00:03:50,557
and if we ensured that MongoDB white listed our local IP
79
00:03:50,557 --> 00:03:52,175
and that the credentials
80
00:03:52,175 --> 00:03:55,290
for connecting to the database are correct.
81
00:03:55,290 --> 00:03:58,710
If we did all of that, we should be able to go back
82
00:03:58,710 --> 00:04:03,050
to our form here and reload, open to dev tools
83
00:04:03,050 --> 00:04:08,010
and then enter our data here, like a first meetup.
84
00:04:08,010 --> 00:04:12,284
And then I will again, wrap this URL
85
00:04:12,284 --> 00:04:13,780
which I picked before
86
00:04:14,800 --> 00:04:16,600
and insert this here as a image
87
00:04:17,570 --> 00:04:22,050
and then some address, some street five, some city.
88
00:04:22,050 --> 00:04:25,750
And this is a first meetup as a description.
89
00:04:25,750 --> 00:04:27,940
And if I now click add meetup
90
00:04:29,240 --> 00:04:33,570
we see this response eventually, which is looking good
91
00:04:33,570 --> 00:04:36,740
because meetup inserted is the message we're sending back
92
00:04:36,740 --> 00:04:38,053
from the API route.
93
00:04:38,910 --> 00:04:41,490
And if we go to MongoDB
94
00:04:41,490 --> 00:04:44,710
to our cluster and click on collections
95
00:04:44,710 --> 00:04:49,190
there we should then actually also see a meetup data base.
96
00:04:49,190 --> 00:04:51,510
And you might not see the other databases here
97
00:04:51,510 --> 00:04:54,350
because I traded more databases in this cluster
98
00:04:54,350 --> 00:04:55,780
but you should see a meetups database
99
00:04:55,780 --> 00:04:58,150
with a meetups collection.
100
00:04:58,150 --> 00:05:01,860
And in there you should see one meetup with the data
101
00:05:01,860 --> 00:05:03,650
you just added.
102
00:05:03,650 --> 00:05:06,223
And an automatically generated ID.
103
00:05:07,380 --> 00:05:09,740
And that's our API route in action
104
00:05:09,740 --> 00:05:11,823
and how we can send a request to it.
105
00:05:12,750 --> 00:05:15,950
Now, of course, we now probably wanna navigate away
106
00:05:15,950 --> 00:05:17,950
after we added a meetup
107
00:05:17,950 --> 00:05:22,950
and therefore back in the new meetup page here.
108
00:05:23,130 --> 00:05:26,622
So not the API route, but the front end facing page.
109
00:05:26,622 --> 00:05:28,640
After we got our response here
110
00:05:28,640 --> 00:05:31,400
we might wanna navigate away programmatically.
111
00:05:31,400 --> 00:05:33,540
And we learned how that worked.
112
00:05:33,540 --> 00:05:37,320
We can use the use router hook
113
00:05:37,320 --> 00:05:39,983
and import it from next router therefore,
114
00:05:41,820 --> 00:05:44,193
to get access to that router object.
115
00:05:45,490 --> 00:05:47,832
And once we got that here after logging
116
00:05:47,832 --> 00:05:51,710
maybe we can navigate away with the push method
117
00:05:51,710 --> 00:05:54,470
or here maybe also with the replace method
118
00:05:54,470 --> 00:05:57,490
to make sure we can't go back with the back button.
119
00:05:57,490 --> 00:06:00,500
If you want to ensure that that's not possible.
120
00:06:00,500 --> 00:06:02,110
Here I don't wanna do that.
121
00:06:02,110 --> 00:06:04,070
And hence, I'll just push this
122
00:06:04,070 --> 00:06:06,340
and then go back to just slash nothing.
123
00:06:06,340 --> 00:06:08,940
So to the starting page, let's say,
124
00:06:08,940 --> 00:06:10,520
and then with that if we save this
125
00:06:10,520 --> 00:06:15,060
and I then enter a second meetup here
126
00:06:15,060 --> 00:06:17,490
and the image link again,
127
00:06:17,490 --> 00:06:20,750
second street two.
128
00:06:20,750 --> 00:06:23,640
This is the second street.
129
00:06:23,640 --> 00:06:26,130
If we do all of that click add meetup
130
00:06:26,130 --> 00:06:29,690
you see eventually we're navigated away.
131
00:06:29,690 --> 00:06:32,220
And of course we could also show a loading spinner
132
00:06:32,220 --> 00:06:33,490
and do all of that
133
00:06:33,490 --> 00:06:36,413
but that's then all just client site standard react
134
00:06:36,413 --> 00:06:40,300
nothing NextJS specific about it.
135
00:06:40,300 --> 00:06:44,120
The NextJS specific part was this API route.
136
00:06:44,120 --> 00:06:47,403
And as you see that route is now working just fine.
10546
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.