Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:04,800
So it's great that we're now storing meetups
2
00:00:04,800 --> 00:00:06,689
here in our collection,
3
00:00:06,689 --> 00:00:09,580
but of course we're not using those stored meetups.
4
00:00:09,580 --> 00:00:13,920
If we go to all meetups, I still display my dummy meetups,
5
00:00:13,920 --> 00:00:16,410
the same for the details page.
6
00:00:16,410 --> 00:00:21,410
Here we would now want to fetch data from mongodb as well.
7
00:00:21,880 --> 00:00:25,450
And of course we could now create new API routes.
8
00:00:25,450 --> 00:00:28,950
We could create an API route called meetups,
9
00:00:28,950 --> 00:00:32,200
and in there, we add this handler function,
10
00:00:32,200 --> 00:00:33,890
we connect to mongodb
11
00:00:33,890 --> 00:00:37,890
and we then write code that fetches all the meetups.
12
00:00:37,890 --> 00:00:42,380
And then on the starting page, in getStaticProps here,
13
00:00:42,380 --> 00:00:44,980
we could simply use fetch()
14
00:00:44,980 --> 00:00:47,840
and indeed nextJS adds a feature
15
00:00:47,840 --> 00:00:52,520
that you can use fetch() on server side code as well.
16
00:00:52,520 --> 00:00:55,030
Normally, you can only use it in the browser
17
00:00:55,030 --> 00:00:57,690
but in Next projects, you can use fetch()
18
00:00:57,690 --> 00:01:00,670
in server side code snippets as well.
19
00:01:00,670 --> 00:01:02,630
And we could then use fetch() therefore,
20
00:01:02,630 --> 00:01:05,470
to send the request to /api/meetups,
21
00:01:05,470 --> 00:01:06,780
fetch all the meetups
22
00:01:06,780 --> 00:01:10,520
and then populate our props with those meetups.
23
00:01:10,520 --> 00:01:14,520
We could do that, but it would be a bit cumbersome.
24
00:01:14,520 --> 00:01:18,080
Sending a request to our own API end point here
25
00:01:18,080 --> 00:01:19,990
is a bit redundant.
26
00:01:19,990 --> 00:01:21,940
Keep in mind that I mentioned that
27
00:01:21,940 --> 00:01:25,020
the code you add here in getStaticProps,
28
00:01:25,020 --> 00:01:29,700
just as in getServerSideProps and getStaticProps,
29
00:01:29,700 --> 00:01:33,930
will only run on the server or during build time,
30
00:01:33,930 --> 00:01:35,980
but never in the client.
31
00:01:35,980 --> 00:01:40,490
So the code in here, will also not be exposed to the client.
32
00:01:40,490 --> 00:01:43,180
So therefore here, if you wanna fetch all meet-ups,
33
00:01:43,180 --> 00:01:45,920
we can directly write the code for doing so
34
00:01:45,920 --> 00:01:48,660
here inside of getStaticProps
35
00:01:48,660 --> 00:01:52,510
or in a helper function, which we then execute here.
36
00:01:52,510 --> 00:01:56,220
So we don't need to send the request to our own API route,
37
00:01:56,220 --> 00:01:59,260
we can immediately execute the code just here
38
00:01:59,260 --> 00:02:02,670
which then writes this extra unnecessary requests
39
00:02:02,670 --> 00:02:05,170
which would be sent otherwise.
40
00:02:05,170 --> 00:02:09,090
So therefore here we can, again import MongoClient
41
00:02:14,410 --> 00:02:19,290
from mongodb, and then connect to it here.
42
00:02:19,290 --> 00:02:23,480
Now, when you import something here in a page component file
43
00:02:23,480 --> 00:02:27,430
and that something is then only used in getServerSideProps
44
00:02:27,430 --> 00:02:32,410
or getStaticProps, the imported package will not be part
45
00:02:32,410 --> 00:02:34,600
of the client side bundle.
46
00:02:34,600 --> 00:02:36,450
So you can import code here
47
00:02:36,450 --> 00:02:39,112
which will then only be executed on the server,
48
00:02:39,112 --> 00:02:41,716
and nextJS will detect this
49
00:02:41,716 --> 00:02:45,220
and not include it in your client's side bundle,
50
00:02:45,220 --> 00:02:48,710
which is good both for bundle size considerations
51
00:02:48,710 --> 00:02:51,350
as well as for security.
52
00:02:51,350 --> 00:02:53,690
So you can import both server side
53
00:02:53,690 --> 00:02:55,080
and clients side code here,
54
00:02:55,080 --> 00:02:57,090
and depending on where you use it,
55
00:02:57,090 --> 00:02:59,880
it will be included in different bundles
56
00:02:59,880 --> 00:03:02,340
which are independent from each other.
57
00:03:02,340 --> 00:03:05,433
That's a nice, smart feature built into nextJS.
58
00:03:07,049 --> 00:03:09,930
And therefore with MongoClient import here,
59
00:03:09,930 --> 00:03:13,493
We can use it in getStaticProps to again connect.
60
00:03:15,770 --> 00:03:18,130
And now we can go to the API route
61
00:03:18,130 --> 00:03:20,750
and get rid of meetups.js there by the way,
62
00:03:20,750 --> 00:03:24,390
and the new-meetup.js we can now in the end copy this code
63
00:03:24,390 --> 00:03:26,740
for establishing connection,
64
00:03:26,740 --> 00:03:28,190
getting access to the database
65
00:03:28,190 --> 00:03:30,320
and getting access to a collection here.
66
00:03:30,320 --> 00:03:32,500
We could therefore also refactor this
67
00:03:32,500 --> 00:03:34,890
and outsource it into a separate function
68
00:03:34,890 --> 00:03:36,770
to avoid copying this,
69
00:03:36,770 --> 00:03:38,600
but here to be very explicit
70
00:03:38,600 --> 00:03:40,860
about which code you can execute where,
71
00:03:40,860 --> 00:03:45,163
I will copy it and paste it here into getStaticProps.
72
00:03:46,640 --> 00:03:51,640
With that, we do connect here and then once we did connect,
73
00:03:51,900 --> 00:03:55,430
and once we did reach out to the meetupsCollection,
74
00:03:55,430 --> 00:03:56,980
we can use the meetupsCollection
75
00:03:56,980 --> 00:03:59,270
to call the find method there
76
00:03:59,270 --> 00:04:01,490
and find() will by default find
77
00:04:01,490 --> 00:04:04,880
all the documents in that collection.
78
00:04:04,880 --> 00:04:07,530
It's an async task, returning a promise
79
00:04:07,530 --> 00:04:09,180
which we can await here
80
00:04:09,180 --> 00:04:12,180
because I'm using the async keyword here.
81
00:04:12,180 --> 00:04:16,640
And then ultimately we'll therefore get our meetups here.
82
00:04:16,640 --> 00:04:20,680
To be precise we, should call toArray() here after find()
83
00:04:20,680 --> 00:04:23,743
so that we get back an array of documents.
84
00:04:24,800 --> 00:04:27,082
Then we have this array of meetups
85
00:04:27,082 --> 00:04:29,810
and to meetups here, which I set to my props
86
00:04:29,810 --> 00:04:34,420
could now be the meetups, which I'm fetching from mongodb.
87
00:04:34,420 --> 00:04:37,800
We can then also of course close the connection again
88
00:04:37,800 --> 00:04:40,400
once we're done patching data from mongodb
89
00:04:40,400 --> 00:04:42,023
before we return.
90
00:04:43,280 --> 00:04:47,100
And if we do that and reload this all meetups page,
91
00:04:47,100 --> 00:04:49,760
we get this error.
92
00:04:49,760 --> 00:04:53,610
This error is related to the auto-generated ID.
93
00:04:53,610 --> 00:04:55,580
As you can see, it's not a string
94
00:04:55,580 --> 00:04:58,340
it's this strange object ID thing.
95
00:04:58,340 --> 00:05:01,620
And that turns out to be a more complex object
96
00:05:01,620 --> 00:05:05,453
which can't be returned as data just like this.
97
00:05:06,590 --> 00:05:08,950
Therefore what we actually need to do here,
98
00:05:08,950 --> 00:05:12,120
is the meetups which we're getting from the database,
99
00:05:12,120 --> 00:05:14,600
we wanna map this array,
100
00:05:14,600 --> 00:05:17,253
so that we transform every meetup a little bit,
101
00:05:18,450 --> 00:05:22,670
and then we return an object here for every meetup
102
00:05:22,670 --> 00:05:26,010
where we have a title which is meetup.title,
103
00:05:26,010 --> 00:05:30,970
where we have an address which is meetup.address,
104
00:05:30,970 --> 00:05:34,680
where we have an image which is meetup.image
105
00:05:34,680 --> 00:05:37,250
and where we have our description maybe
106
00:05:37,250 --> 00:05:39,070
though we actually don't need this here.
107
00:05:39,070 --> 00:05:42,320
So we can avoid description for this component
108
00:05:42,320 --> 00:05:44,570
because we're not outputting the description anyways
109
00:05:44,570 --> 00:05:46,510
on this all meetups page.
110
00:05:46,510 --> 00:05:50,380
But we do also add an ID field, not underscore ID
111
00:05:50,380 --> 00:05:54,320
but just ID like this, because I'm using just ID like this
112
00:05:54,320 --> 00:05:56,670
in my front end components.
113
00:05:56,670 --> 00:06:01,670
And we set this equal to meet.dot_id.toString().
114
00:06:01,760 --> 00:06:05,150
And this will then convert this object to a string,
115
00:06:05,150 --> 00:06:06,243
which is usable.
116
00:06:07,350 --> 00:06:10,830
And if we convert our data like this and save everything,
117
00:06:10,830 --> 00:06:13,550
you will see that if we reload the starting page
118
00:06:13,550 --> 00:06:15,830
this works and we see our meetups again,
119
00:06:15,830 --> 00:06:18,930
but that's now actually a list of meetups
120
00:06:18,930 --> 00:06:23,380
based on the meetup data we have in our mongodb database,
121
00:06:23,380 --> 00:06:25,713
not our dummy meetups anymore.
122
00:06:26,680 --> 00:06:27,860
And I can prove this,
123
00:06:27,860 --> 00:06:30,930
if I remove my dummy meetups array here,
124
00:06:30,930 --> 00:06:34,920
if I remove this array entirely from this index.js file
125
00:06:34,920 --> 00:06:37,060
everything will still work fine,
126
00:06:37,060 --> 00:06:40,170
if we reload the starting page.
127
00:06:40,170 --> 00:06:43,240
So now we are pre-rendering this page
128
00:06:43,240 --> 00:06:47,140
with data that's actually coming from a database.
129
00:06:47,140 --> 00:06:49,160
And all this code will execute
130
00:06:49,160 --> 00:06:52,520
whenever this page is pre-generated.
131
00:06:52,520 --> 00:06:55,290
So not for every incoming request,
132
00:06:55,290 --> 00:06:59,350
because it's not getServerSideProps but getStaticProps.
133
00:06:59,350 --> 00:07:01,500
But therefore during the build process,
134
00:07:01,500 --> 00:07:05,960
and when we revalidate, then this page will be pre-rendered
135
00:07:05,960 --> 00:07:08,023
and this code will run again.
10853
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.