1
00:00:02,000 --> 00:00:05,000
Now let's make this a bit more complex.

2
00:00:05,000 --> 00:00:09,000
What if I don't just wanna have my load feedback button here

3
00:00:09,000 --> 00:00:14,000
but I also want to have a let's say /feedback route here

4
00:00:14,000 --> 00:00:19,000
so not /api/feedback but just /feedback.

5
00:00:19,000 --> 00:00:23,000
Which should load a new HTML page.

6
00:00:23,000 --> 00:00:26,000
So a page rendered in the browser

7
00:00:26,000 --> 00:00:28,000
which also lists my feedback.

8
00:00:28,000 --> 00:00:33,000
So now I wanna add a new normal page, not an API route

9
00:00:33,000 --> 00:00:36,000
but I wanna add a new normal page.

10
00:00:36,000 --> 00:00:38,000
That is still possible.

11
00:00:38,000 --> 00:00:41,000
We can still add a feedback JS file here as well

12
00:00:41,000 --> 00:00:45,000
in the pages folder, but outside of API

13
00:00:45,000 --> 00:00:49,000
or as you learned ,alternatively, add a feedback folder

14
00:00:49,000 --> 00:00:51,000
with a index JS file in there.

15
00:00:51,000 --> 00:00:54,000
That's the equivalent to having a file named

16
00:00:54,000 --> 00:00:56,000
feedback JS on the level above.

17
00:00:56,000 --> 00:00:58,000
And that's therefore what I'll go with here

18
00:00:58,000 --> 00:01:01,000
and then in this index JS file

19
00:01:01,000 --> 00:01:02,000
instead of that feedback folder,

20
00:01:02,000 --> 00:01:07,000
we can again create our regular component

21
00:01:07,000 --> 00:01:10,000
the feedback page component which we export

22
00:01:12,000 --> 00:01:16,000
and then here we can of course also render our list of

23
00:01:16,000 --> 00:01:18,000
feedbacks.

24
00:01:18,000 --> 00:01:23,000
And we can now of course also just fetch our feedback data

25
00:01:23,000 --> 00:01:26,000
whenever that component is rendered, for example,

26
00:01:26,000 --> 00:01:27,000
with help of useEffect

27
00:01:27,000 --> 00:01:30,000
to implement client's site data fetching

28
00:01:30,000 --> 00:01:33,000
as you learned it in the data fetching section

29
00:01:33,000 --> 00:01:37,000
but maybe we also wanna pre-render this page

30
00:01:37,000 --> 00:01:41,000
and prefetch the data for pre-rendering.

31
00:01:41,000 --> 00:01:43,000
And that is something which we would do

32
00:01:43,000 --> 00:01:47,000
by exporting an async function called getStaticProps.

33
00:01:49,000 --> 00:01:52,000
That's what you also learned before in this course.

34
00:01:52,000 --> 00:01:54,000
We can still use these features

35
00:01:54,000 --> 00:01:57,000
even if we also use API routes in the project.

36
00:01:57,000 --> 00:02:01,000
Of course, I would say because using API routes

37
00:02:01,000 --> 00:02:02,000
is an extra feature

38
00:02:02,000 --> 00:02:06,000
it doesn't change the way next JS works.

39
00:02:06,000 --> 00:02:10,000
So we can still add regular pages with features like

40
00:02:10,000 --> 00:02:13,000
getStaticProps to also have some

41
00:02:13,000 --> 00:02:16,000
server-side or node JS code

42
00:02:16,000 --> 00:02:20,000
that is executed there when this page is pre-rendered.

43
00:02:21,000 --> 00:02:23,000
Now, the interesting thing is though

44
00:02:23,000 --> 00:02:28,000
what if we now here want to fetch our feedback data

45
00:02:29,000 --> 00:02:32,000
for pre-rendering this page?

46
00:02:32,000 --> 00:02:37,000
So here through props in this component I expect to get

47
00:02:37,000 --> 00:02:41,000
my feedback items let's say and I wanna map them

48
00:02:41,000 --> 00:02:43,000
into list items

49
00:02:43,000 --> 00:02:47,000
where I then still output item.text

50
00:02:47,000 --> 00:02:52,000
and where I then still have my key set to item.id.

51
00:02:53,000 --> 00:02:57,000
But now feedback items should be received through props

52
00:02:57,000 --> 00:02:58,000
with help of getStaticProps.

53
00:02:59,000 --> 00:03:01,000
How can we now make that work?

54
00:03:02,000 --> 00:03:04,000
Well, we did see similar examples

55
00:03:04,000 --> 00:03:07,000
in the data fetching sections.

56
00:03:07,000 --> 00:03:11,000
There we for example, also talked to Firebase

57
00:03:11,000 --> 00:03:15,000
and we then use the fetch API here, the fetch function

58
00:03:15,000 --> 00:03:19,000
here inside of getStaticProps to still send the request

59
00:03:19,000 --> 00:03:22,000
to an API and get data from there.

60
00:03:22,000 --> 00:03:24,000
And that works as you saw there.

61
00:03:24,000 --> 00:03:27,000
But, whilst this is

62
00:03:27,000 --> 00:03:31,000
absolutely fine for external APIs

63
00:03:31,000 --> 00:03:35,000
like the Firebase API, you should not

64
00:03:35,000 --> 00:03:39,000
use fetch inside of getStaticProps or

65
00:03:39,000 --> 00:03:43,000
getServerSideProps to talk to your own API.

66
00:03:43,000 --> 00:03:47,000
Instead since this is all part of one project

67
00:03:47,000 --> 00:03:51,000
and therefore ultimately all served by one server.

68
00:03:51,000 --> 00:03:52,000
What you should do instead

69
00:03:52,000 --> 00:03:57,000
is write any note JS logic that should execute here

70
00:03:57,000 --> 00:03:59,000
directly inside of getStaticProps.

71
00:04:00,000 --> 00:04:03,000
So if we have some logic in our API route

72
00:04:03,000 --> 00:04:05,000
which also might need to be executed here

73
00:04:05,000 --> 00:04:08,000
inside of a regular page,

74
00:04:08,000 --> 00:04:12,000
then we should just make it available through an export

75
00:04:12,000 --> 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,000
directly here inside of getStaticProps

77
00:04:20,000 --> 00:04:21,000
or getServerSideProps.

78
00:04:22,000 --> 00:04:25,000
So that means that here in this case

79
00:04:26,000 --> 00:04:29,000
this code for building the feedback path

80
00:04:29,000 --> 00:04:31,000
and extracting the feedback

81
00:04:31,000 --> 00:04:35,000
should be executed directly here in getStaticProps.

82
00:04:35,000 --> 00:04:40,000
We just don't wanna set some response status code

83
00:04:40,000 --> 00:04:42,000
and return a response

84
00:04:42,000 --> 00:04:44,000
because that's not what getStaticProps is about.

85
00:04:44,000 --> 00:04:47,000
This is just about producing the data

86
00:04:47,000 --> 00:04:49,000
for our page component.

87
00:04:50,000 --> 00:04:53,000
But since I already have extract feedback

88
00:04:53,000 --> 00:04:56,000
and filled feedback path in separate functions

89
00:04:56,000 --> 00:05:00,000
we can just export these functions to make them available

90
00:05:00,000 --> 00:05:04,000
outside of this API feedback JS file

91
00:05:04,000 --> 00:05:08,000
export both functions and then in index JS,

92
00:05:08,000 --> 00:05:10,000
we can import these functions.

93
00:05:10,000 --> 00:05:15,000
We can import from going up one level diving into API

94
00:05:16,000 --> 00:05:19,000
diving into feedback and import from there.

95
00:05:19,000 --> 00:05:22,000
or we put those functions into a separate

96
00:05:22,000 --> 00:05:25,000
other folder and file, right from the start.

97
00:05:25,000 --> 00:05:30,000
We could add a helpers folder on the root project level

98
00:05:30,000 --> 00:05:33,000
and store our functions in some file in there.

99
00:05:33,000 --> 00:05:35,000
That would also be fine.

100
00:05:35,000 --> 00:05:38,000
But here I'm importing from the API feedback file

101
00:05:38,000 --> 00:05:42,000
and I'll import the build feedback path function

102
00:05:42,000 --> 00:05:45,000
and the extract feedback function.

103
00:05:46,000 --> 00:05:48,000
Now, the cool thing is

104
00:05:48,000 --> 00:05:51,000
that next JS will detect that what we're importing here

105
00:05:51,000 --> 00:05:54,000
isn't the end code that will only use inside

106
00:05:54,000 --> 00:05:55,000
of getStaticProps

107
00:05:56,000 --> 00:06:00,000
and therefore that code will still not be included

108
00:06:00,000 --> 00:06:02,000
in the client side bundle.

109
00:06:02,000 --> 00:06:05,000
I talked about this in earlier sections already.

110
00:06:05,000 --> 00:06:10,000
Code used in getStaticProps and dependencies used in there

111
00:06:10,000 --> 00:06:13,000
so imports used in there will not end up

112
00:06:13,000 --> 00:06:17,000
in the client side code bundle if we're not using that code

113
00:06:17,000 --> 00:06:19,000
anywhere in our client side code.

114
00:06:20,000 --> 00:06:21,000
So therefore here

115
00:06:21,000 --> 00:06:25,000
We can now call build feedback path to construct our

116
00:06:27,000 --> 00:06:29,000
file path here.

117
00:06:29,000 --> 00:06:31,000
And then we can get access to our data

118
00:06:31,000 --> 00:06:35,000
by calling extract feedback and passing in the file path

119
00:06:36,000 --> 00:06:38,000
and then we just return our standard object

120
00:06:38,000 --> 00:06:42,000
with the props key as we always do it in getStaticProps

121
00:06:43,000 --> 00:06:47,000
and we expose our feedback items

122
00:06:47,000 --> 00:06:48,000
because that's what I'm looking for.

123
00:06:48,000 --> 00:06:52,000
All my props here, which is my data

124
00:06:52,000 --> 00:06:56,000
because to date I'm extracting is that extracted error

125
00:06:56,000 --> 00:06:57,000
from feedback json.

126
00:06:58,000 --> 00:07:03,000
So now we have that code here inside of our regular page

127
00:07:03,000 --> 00:07:05,000
instead of using fetch and sending a request

128
00:07:05,000 --> 00:07:08,000
to our own API route

129
00:07:08,000 --> 00:07:11,000
because when working with your own API routes

130
00:07:11,000 --> 00:07:15,000
and when requiring them in your regular pages

131
00:07:15,000 --> 00:07:18,000
you should not send the HTTP request to them

132
00:07:18,000 --> 00:07:21,000
but instead leverage the fact that it's all running

133
00:07:21,000 --> 00:07:24,000
on the same computer on the same server

134
00:07:24,000 --> 00:07:28,000
and therefore just import it and directly run that code

135
00:07:28,000 --> 00:07:33,000
instead of sending that unnecessary HTTP request.

136
00:07:33,000 --> 00:07:35,000
And with that if we save all of this

137
00:07:35,000 --> 00:07:39,000
and I visit my domain /feedback

138
00:07:39,000 --> 00:07:41,000
you see that as all to showing up there.

139
00:07:41,000 --> 00:07:43,000
And if we viewed a page source

140
00:07:43,000 --> 00:07:45,000
we see that it was pre-rendered

141
00:07:45,000 --> 00:07:47,000
because of getStaticProps.

142
00:07:49,000 --> 00:07:52,000
So that is how you should interact with your API routes

143
00:07:52,000 --> 00:07:57,000
when you're using that data for pre-rendering a page.

144
00:07:57,000 --> 00:08:00,000
No matter if you're using getStaticProps

145
00:08:00,000 --> 00:08:01,000
or getServerSideProps.