Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:05,140
Now let's make this a bit more complex.
2
00:00:05,140 --> 00:00:09,770
What if I don't just wanna have my load feedback button here
3
00:00:09,770 --> 00:00:14,770
but I also want to have a let's say /feedback route here
4
00:00:14,810 --> 00:00:19,490
so not /api/feedback but just /feedback.
5
00:00:19,490 --> 00:00:23,750
Which should load a new HTML page.
6
00:00:23,750 --> 00:00:26,430
So a page rendered in the browser
7
00:00:26,430 --> 00:00:28,750
which also lists my feedback.
8
00:00:28,750 --> 00:00:33,320
So now I wanna add a new normal page, not an API route
9
00:00:33,320 --> 00:00:36,770
but I wanna add a new normal page.
10
00:00:36,770 --> 00:00:38,470
That is still possible.
11
00:00:38,470 --> 00:00:41,970
We can still add a feedback JS file here as well
12
00:00:41,970 --> 00:00:45,360
in the pages folder, but outside of API
13
00:00:45,360 --> 00:00:49,300
or as you learned ,alternatively, add a feedback folder
14
00:00:49,300 --> 00:00:51,640
with a index JS file in there.
15
00:00:51,640 --> 00:00:54,130
That's the equivalent to having a file named
16
00:00:54,130 --> 00:00:56,350
feedback JS on the level above.
17
00:00:56,350 --> 00:00:58,800
And that's therefore what I'll go with here
18
00:00:58,800 --> 00:01:01,060
and then in this index JS file
19
00:01:01,060 --> 00:01:02,930
instead of that feedback folder,
20
00:01:02,930 --> 00:01:07,170
we can again create our regular component
21
00:01:07,170 --> 00:01:10,890
the feedback page component which we export
22
00:01:12,220 --> 00:01:16,950
and then here we can of course also render our list of
23
00:01:16,950 --> 00:01:18,690
feedbacks.
24
00:01:18,690 --> 00:01:23,040
And we can now of course also just fetch our feedback data
25
00:01:23,040 --> 00:01:26,040
whenever that component is rendered, for example,
26
00:01:26,040 --> 00:01:27,960
with help of useEffect
27
00:01:27,960 --> 00:01:30,980
to implement client's site data fetching
28
00:01:30,980 --> 00:01:33,880
as you learned it in the data fetching section
29
00:01:33,880 --> 00:01:37,630
but maybe we also wanna pre-render this page
30
00:01:37,630 --> 00:01:41,450
and prefetch the data for pre-rendering.
31
00:01:41,450 --> 00:01:43,950
And that is something which we would do
32
00:01:43,950 --> 00:01:47,513
by exporting an async function called getStaticProps.
33
00:01:49,210 --> 00:01:52,270
That's what you also learned before in this course.
34
00:01:52,270 --> 00:01:54,390
We can still use these features
35
00:01:54,390 --> 00:01:57,980
even if we also use API routes in the project.
36
00:01:57,980 --> 00:02:01,300
Of course, I would say because using API routes
37
00:02:01,300 --> 00:02:02,900
is an extra feature
38
00:02:02,900 --> 00:02:06,230
it doesn't change the way next JS works.
39
00:02:06,230 --> 00:02:10,221
So we can still add regular pages with features like
40
00:02:10,221 --> 00:02:13,570
getStaticProps to also have some
41
00:02:13,570 --> 00:02:16,850
server-side or node JS code
42
00:02:16,850 --> 00:02:20,323
that is executed there when this page is pre-rendered.
43
00:02:21,210 --> 00:02:23,550
Now, the interesting thing is though
44
00:02:23,550 --> 00:02:28,550
what if we now here want to fetch our feedback data
45
00:02:29,310 --> 00:02:32,180
for pre-rendering this page?
46
00:02:32,180 --> 00:02:37,180
So here through props in this component I expect to get
47
00:02:37,300 --> 00:02:41,680
my feedback items let's say and I wanna map them
48
00:02:41,680 --> 00:02:43,890
into list items
49
00:02:43,890 --> 00:02:47,640
where I then still output item.text
50
00:02:47,640 --> 00:02:52,640
and where I then still have my key set to item.id.
51
00:02:53,890 --> 00:02:57,230
But now feedback items should be received through props
52
00:02:57,230 --> 00:02:58,733
with help of getStaticProps.
53
00:02:59,720 --> 00:03:01,563
How can we now make that work?
54
00:03:02,550 --> 00:03:04,840
Well, we did see similar examples
55
00:03:04,840 --> 00:03:07,300
in the data fetching sections.
56
00:03:07,300 --> 00:03:11,370
There we for example, also talked to Firebase
57
00:03:11,370 --> 00:03:15,390
and we then use the fetch API here, the fetch function
58
00:03:15,390 --> 00:03:19,560
here inside of getStaticProps to still send the request
59
00:03:19,560 --> 00:03:22,500
to an API and get data from there.
60
00:03:22,500 --> 00:03:24,790
And that works as you saw there.
61
00:03:24,790 --> 00:03:27,400
But, whilst this is
62
00:03:27,400 --> 00:03:31,330
absolutely fine for external APIs
63
00:03:31,330 --> 00:03:35,080
like the Firebase API, you should not
64
00:03:35,080 --> 00:03:39,100
use fetch inside of getStaticProps or
65
00:03:39,100 --> 00:03:43,690
getServerSideProps to talk to your own API.
66
00:03:43,690 --> 00:03:47,610
Instead since this is all part of one project
67
00:03:47,610 --> 00:03:51,390
and therefore ultimately all served by one server.
68
00:03:51,390 --> 00:03:52,940
What you should do instead
69
00:03:52,940 --> 00:03:57,130
is write any note JS logic that should execute here
70
00:03:57,130 --> 00:03:59,043
directly inside of getStaticProps.
71
00:04:00,100 --> 00:04:03,180
So if we have some logic in our API route
72
00:04:03,180 --> 00:04:05,870
which also might need to be executed here
73
00:04:05,870 --> 00:04:08,480
inside of a regular page,
74
00:04:08,480 --> 00:04:12,443
then we should just make it available through an export
75
00:04:12,443 --> 00:04:17,000
so that we can run the code to find in the API route
76
00:04:17,000 --> 00:04:20,220
directly here inside of getStaticProps
77
00:04:20,220 --> 00:04:21,833
or getServerSideProps.
78
00:04:22,810 --> 00:04:25,030
So that means that here in this case
79
00:04:26,140 --> 00:04:29,840
this code for building the feedback path
80
00:04:29,840 --> 00:04:31,570
and extracting the feedback
81
00:04:31,570 --> 00:04:35,860
should be executed directly here in getStaticProps.
82
00:04:35,860 --> 00:04:40,220
We just don't wanna set some response status code
83
00:04:40,220 --> 00:04:42,060
and return a response
84
00:04:42,060 --> 00:04:44,930
because that's not what getStaticProps is about.
85
00:04:44,930 --> 00:04:47,610
This is just about producing the data
86
00:04:47,610 --> 00:04:49,313
for our page component.
87
00:04:50,880 --> 00:04:53,380
But since I already have extract feedback
88
00:04:53,380 --> 00:04:56,650
and filled feedback path in separate functions
89
00:04:56,650 --> 00:05:00,410
we can just export these functions to make them available
90
00:05:00,410 --> 00:05:04,230
outside of this API feedback JS file
91
00:05:04,230 --> 00:05:08,220
export both functions and then in index JS,
92
00:05:08,220 --> 00:05:10,650
we can import these functions.
93
00:05:10,650 --> 00:05:15,650
We can import from going up one level diving into API
94
00:05:16,170 --> 00:05:19,570
diving into feedback and import from there.
95
00:05:19,570 --> 00:05:22,960
or we put those functions into a separate
96
00:05:22,960 --> 00:05:25,990
other folder and file, right from the start.
97
00:05:25,990 --> 00:05:30,640
We could add a helpers folder on the root project level
98
00:05:30,640 --> 00:05:33,800
and store our functions in some file in there.
99
00:05:33,800 --> 00:05:35,660
That would also be fine.
100
00:05:35,660 --> 00:05:38,650
But here I'm importing from the API feedback file
101
00:05:38,650 --> 00:05:42,350
and I'll import the build feedback path function
102
00:05:42,350 --> 00:05:45,293
and the extract feedback function.
103
00:05:46,330 --> 00:05:48,000
Now, the cool thing is
104
00:05:48,000 --> 00:05:51,750
that next JS will detect that what we're importing here
105
00:05:51,750 --> 00:05:54,560
isn't the end code that will only use inside
106
00:05:54,560 --> 00:05:55,410
of getStaticProps
107
00:05:56,350 --> 00:06:00,080
and therefore that code will still not be included
108
00:06:00,080 --> 00:06:02,150
in the client side bundle.
109
00:06:02,150 --> 00:06:05,830
I talked about this in earlier sections already.
110
00:06:05,830 --> 00:06:10,330
Code used in getStaticProps and dependencies used in there
111
00:06:10,330 --> 00:06:13,570
so imports used in there will not end up
112
00:06:13,570 --> 00:06:17,060
in the client side code bundle if we're not using that code
113
00:06:17,060 --> 00:06:19,423
anywhere in our client side code.
114
00:06:20,420 --> 00:06:21,300
So therefore here
115
00:06:21,300 --> 00:06:25,720
We can now call build feedback path to construct our
116
00:06:27,500 --> 00:06:29,490
file path here.
117
00:06:29,490 --> 00:06:31,610
And then we can get access to our data
118
00:06:31,610 --> 00:06:35,040
by calling extract feedback and passing in the file path
119
00:06:36,240 --> 00:06:38,800
and then we just return our standard object
120
00:06:38,800 --> 00:06:42,240
with the props key as we always do it in getStaticProps
121
00:06:43,410 --> 00:06:47,490
and we expose our feedback items
122
00:06:47,490 --> 00:06:48,940
because that's what I'm looking for.
123
00:06:48,940 --> 00:06:52,640
All my props here, which is my data
124
00:06:52,640 --> 00:06:56,330
because to date I'm extracting is that extracted error
125
00:06:56,330 --> 00:06:57,653
from feedback json.
126
00:06:58,520 --> 00:07:03,170
So now we have that code here inside of our regular page
127
00:07:03,170 --> 00:07:05,970
instead of using fetch and sending a request
128
00:07:05,970 --> 00:07:08,030
to our own API route
129
00:07:08,030 --> 00:07:11,150
because when working with your own API routes
130
00:07:11,150 --> 00:07:15,140
and when requiring them in your regular pages
131
00:07:15,140 --> 00:07:18,590
you should not send the HTTP request to them
132
00:07:18,590 --> 00:07:21,870
but instead leverage the fact that it's all running
133
00:07:21,870 --> 00:07:24,760
on the same computer on the same server
134
00:07:24,760 --> 00:07:28,820
and therefore just import it and directly run that code
135
00:07:28,820 --> 00:07:33,290
instead of sending that unnecessary HTTP request.
136
00:07:33,290 --> 00:07:35,910
And with that if we save all of this
137
00:07:35,910 --> 00:07:39,030
and I visit my domain /feedback
138
00:07:39,030 --> 00:07:41,490
you see that as all to showing up there.
139
00:07:41,490 --> 00:07:43,270
And if we viewed a page source
140
00:07:43,270 --> 00:07:45,540
we see that it was pre-rendered
141
00:07:45,540 --> 00:07:47,493
because of getStaticProps.
142
00:07:49,442 --> 00:07:52,800
So that is how you should interact with your API routes
143
00:07:52,800 --> 00:07:57,630
when you're using that data for pre-rendering a page.
144
00:07:57,630 --> 00:08:00,490
No matter if you're using getStaticProps
145
00:08:00,490 --> 00:08:01,833
or getServerSideProps.
11485
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.