Next.js Tutorial #15 Dynamic Pages with getStaticProps #nextjs #nextjstutorial #nextjs13
Next.js Tutorial #15 Dynamic Pages with getStaticProps #nextjs #nextjstutorial #nextjs13
Next.js Tutorial #15 Dynamic Pages with GetStaticProps
In this video , we’ll learn how to use getstaticprops for generating dynamic pages.If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
Time Stamp
0:00 = Intro
0:48 = Demo
9:32 = Issues
Dynamic route = • Next.js Tutorial #6 Dynamic Routing …
Static Generation = • Next.js Tutorial #13 Static Generation
Static Page = • Next.js Tutorial #14 Static page with…
#nextjs #nextjs13 #nextjstutorial #DATAHACKS
Content
0.78 -> foreign
7.259 -> series
13.32 -> in this video I am going to explain
15.36 -> about the dynamic pages with get static
19.44 -> props
21.6 -> so before that definitely you should
24.42 -> have the basic understanding of what is
27.18 -> get static props
29.58 -> if you don't have don't do it I will
32.46 -> provide the link in the top right corner
34.92 -> of this video
36.54 -> otherwise I will provide the links in
39.239 -> the description which are the videos
41.399 -> related to the get static props
43.8 -> previously I have posted
46.32 -> so next we are going to start the
48.6 -> Practical demo before that I am going to
51.42 -> narrate what we are going to implement
54.899 -> in this practical demo with get static
58.14 -> props in xjis
60.42 -> so first we are going to create a block
63.66 -> which is going to
65.46 -> list all the blocks and we can navigate
67.979 -> through this block page
70.32 -> so after that we can navigate to the
72.78 -> each blocks easily through this block
76.38 -> list page
77.76 -> so this is what we are going to
80.34 -> implement
82.56 -> so let's start the Practical
84.6 -> demonstration
86.88 -> here first of all I am going to create a
89.58 -> page called blog
91.939 -> Dot jsx first I am going to create a
96.9 -> function
98.159 -> and
100.2 -> next I am going to create another
102.24 -> function which is going to
105.299 -> help me in getting the data from the API
109.079 -> call it's asynchronous function
112.2 -> so a sync function gets
116.1 -> the
118.259 -> crops
120.42 -> so first of all we are going to get the
123.54 -> data and we have to store so I am
126.479 -> creating the
129 -> variable to store the data
131.819 -> so
133.02 -> to
137.34 -> to get the data I am going to use the
140.16 -> fish method so we have to get the data
143.64 -> to the through the API so I am going to
147 -> use the fake API called Json Json
151.5 -> placeholder
153.66 -> so here I already used in the previous
156.9 -> video so I am going to copy the same
159.42 -> link here
160.98 -> so after placing this I am going to
163.62 -> remove this one the one is nothing but
166.26 -> it is a post ID it will bring that
169.8 -> specific data
172.5 -> so now we have
174.66 -> get the successfully we have get the
177.78 -> data so now we have to convert them into
180.959 -> Json format
183.56 -> so Json format
187.5 -> so we have to provide a weight function
190.98 -> so we have successfully converted into
193.379 -> Json format the final thing is we have
196.56 -> to return within the
199.379 -> props
202.26 -> then we have to
204.42 -> pass them to the
206.22 -> components
208.14 -> so here we restructure the props and we
211.56 -> have used this variable to get that data
215.7 -> here
217.44 -> we have two
220.26 -> remove this and we have to provide the
223.26 -> fragment then we can provide the
227.22 -> curly braces
229.92 -> and
231.36 -> here I am going to
233.22 -> I'm going to first import the
235.98 -> link tag
238.08 -> from next Js
239.94 -> from next slash
244.98 -> link
247.319 -> so after importing a link
251.76 -> we have to we have to create the
257.18 -> we have to create the elements in a loop
261.18 -> so I am going to provide the
267.36 -> dates
269.4 -> so I am going to provide the data dot
273.06 -> slice because this data contains more
277.86 -> than 50 datas so this data array contain
281.88 -> more than 50. I don't need a 50 or 100
285.66 -> data to explain I need only
288.6 -> minimum amount of data to explain to you
291.36 -> so I take only
293.94 -> three datas and it's going to return
298.08 -> link
300.84 -> within this link I am going to provide
305.58 -> P tag
308.82 -> within this
311.28 -> P tag
314.58 -> I'm going to provide
317.58 -> so this one
321.36 -> so this data represents that each
324.6 -> individual data is coming through the
326.46 -> loop so data Dot
329.759 -> title
332.699 -> in here we have to provide the key tag
336.9 -> whenever we use a loop definitely we
340.02 -> should provide the key
343.139 -> so here we can achieve this then
347.52 -> we have to provide the link
351.24 -> that's enough
353.52 -> calibrases
357.12 -> slash
359.58 -> data dot here also I'm going to provide
362.16 -> same data dot ID
364.62 -> so this ID will react as a path for the
371.52 -> page so first of all I'm going to
374.58 -> texture this
376.5 -> page
379.62 -> so
382.02 -> here we are going to access the home
384.36 -> page but we don't need to access
385.919 -> homepage art now we need to access blog
388.56 -> page here we have all the three datas
391.919 -> which is
393.84 -> listed in under it act as a URL you can
397.139 -> see in the top bottom the URL is shown
400.319 -> in the
401.819 -> bottom left corner in that
405.66 -> bottom left corner you can see the link
408.419 -> when you hover the link attack so next I
412.02 -> am going to create the dynamic page
416.1 -> so here we have provided the link but if
419.28 -> we access the link there should be a
421.02 -> page for that I am going to create a
423.96 -> dynamic page called blog
427.319 -> page
428.819 -> Dot jsons
430.8 -> here also I am going to provide the
433.08 -> functional component
436.199 -> and
438.66 -> here we rename the name then
443.88 -> here I am going to copy the
446.46 -> get static props function the same
449.28 -> function
451.02 -> but when we use here so here we have the
455.4 -> variable which is going to assign the
458.22 -> value provided by the user in the route
461.88 -> so to access that
464.22 -> variable we are going to use context
469.88 -> constant
471.78 -> next here parents we can access multiple
477.479 -> parameters through this context like
479.88 -> params response request here I need only
483.72 -> this context
486.599 -> so it will not cause any problem
490.139 -> after this we have to provide the params
492.599 -> within the link so we are generating
495.419 -> them
496.74 -> normal
500.22 -> URL
503.699 -> with the string letters so I am
506.099 -> replacing this double string with the
508.86 -> this
510.12 -> string letters then I am going to
513 -> provide
516.32 -> firearms dot the variable provided
520.02 -> within here
522.24 -> blog
523.919 -> page
525.899 -> so now we have successfully created the
528.66 -> blog page it's going to return the data
532.26 -> so here also we have to provide
535.04 -> destructured data
538.38 -> here we don't need any
541.5 -> Loops functions because we are going to
544.2 -> provide only a specific
546.48 -> data which is related to the particular
548.94 -> block so here I am going to provide P
552.42 -> tag
553.44 -> P tag
555.18 -> P tag
557.04 -> data Dot
559.5 -> title
561.839 -> so now we can refresh this page here now
566.88 -> also you can see the link in the bottom
569.459 -> left corner so I'm clicking this
574.38 -> so it's reloading and the
577.8 -> it's successfully navigate to the page
581.64 -> like one this
584.22 -> localhost 3000 slash one the next year
588.18 -> is successfully
590.04 -> navigator to the path but here we are
593.76 -> receiving this get static crops
596.88 -> get static path is required this kind of
600.42 -> error so why this kind of error is
602.58 -> happen
604.44 -> so for that
608.36 -> when we when we create a normal page the
611.88 -> data will be rendered on the routing
614.279 -> routing is nothing but the path for the
616.5 -> page will be automatically fixed
619.98 -> the page will be generated and the
622.8 -> address address for the page will be
625.58 -> automatically generated
627.72 -> but when we create a dynamic pages with
631.26 -> the get static props the page will be
633.3 -> generated but the address will not that
637.26 -> means the path of the page will not
639.18 -> automatically generated we have to
641.58 -> manually generate the
644.04 -> path for the page we have to assign the
646.5 -> path for the page
648.959 -> this is what
650.76 -> happening here this is why we received
653.22 -> the error so to resolve to resolve this
656.88 -> I am going to post the solution for this
659.579 -> problem in next video
664.14 -> so keep subscribing the YouTube channel
666.36 -> and like the hit button hit the like
668.94 -> button
Source: https://www.youtube.com/watch?v=NJihi-EuEsI