Using the API Endpoints | NextJs Tutorial for Beginners #19
Using the API Endpoints | NextJs Tutorial for Beginners #19
In this video, we will be using the API endpoints we have created in our next.js application
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉
Content
0 -> so far we have made useful end points
3.177 -> until we don't use these end points in next.js
6.771 -> till then application won't be able to run it
9.69 -> so in this video
11.602 -> we will create a connection between front and back end
14.479 -> we'll see the front end of hunting coder in which we have written css
19.616 -> how will it talk to back end of API
22.961 -> and how ill we make the strategies due to which
27.133 -> we'll call API roots
29.073 -> lets go to computer screen and see how all these things are done
42.438 -> so fare we have worked under hunting coder
45.336 -> quickly i will run yarn dev
47.503 -> and after that i will see how long my work has been done, next.js is quite far
52.555 -> how far is my server done i would like to see
55.146 -> and my server is looking good now, so if I click on the blog and post a blog it will be seen like this
62.961 -> now the end points which we made
67.847 -> my end points are present in EPI
70.923 -> end points should be used which were made by me
73.759 -> because if we cannot use it what would be the benefit of making it
77.187 -> and the blog page over here i will
80.498 -> here i want all the blogs to be populated
83.724 -> once the blogs page is opened i will update the blog
88.195 -> which i have made so quickly i will
91.083 -> do it and will come in blogs.js
95.355 -> the blog.js of mine
98.318 -> will now go to end point and write slash
101.723 -> API/blogs now see
105.242 -> all the three blogs are seen first is how to learn flask
108.767 -> next is how to learn java script and next is how to learn next.js
113.009 -> but in the blog i don't want to return the data just like this
117.617 -> i want my blogs to read the data from the file system
121.637 -> along with reading here
123.608 -> i want to read the data inside the directories
126.278 -> what will i do here
127.368 -> i will write data.for each
129.705 -> this for each i will run for all the items
132.731 -> here i will write item
137.126 -> and will write console.log
141.418 -> ill write here item
143.154 -> after doing that i will show you
146.259 -> after reloading all the items are here
149.459 -> i want to read the files and i will write fs
152.875 -> .read file
154.055 -> and read file takes path
156.896 -> and takes call back so the path
159.889 -> of this file will be
162.599 -> fs.read file path will be
165.845 -> blog data
167.245 -> here will write blog data
171.545 -> will add in it
173.419 -> i will add slash in blog data
175.813 -> after doing that
177.396 -> the item over here
179.197 -> item is a variable not a string
181.721 -> will add it
183.086 -> the second argument of the read file
186.653 -> i will take in bracket the first argument
192.342 -> the second argument of mine is a call back argument
194.309 -> i will call this call back function
197.055 -> what am i doing here see
199.725 -> i will fetch all the blogs which are files in the folders
206.629 -> fetched it
207.896 -> now bring content of every file
211.123 -> will bring the content of the file
213.649 -> but i don't need all the content
217.357 -> i will need title and description of it
221.39 -> so i will bring the content too
223.889 -> here is my blog,js so here fs.read file is here
231.067 -> see what i am doing here
232.695 -> here i will create a variable named all blogs
237.028 -> what will i do to all blogs
238.558 -> all blogs is an array so
241.583 -> and will write here
243.299 -> all blogs =allblogs.concat
247.691 -> which is a method
248.867 -> it basically additional arrays and items to add at the end of the array
254.407 -> i will not use concat i will use push
257.498 -> what does pushpiush returns
258.923 -> push doesn't return anything
260.984 -> will add elements in all blogs
262.857 -> so will write simply allblogs.push
265.058 -> and after that
267.56 -> here will push D
269.9 -> finally have written here D for data
273.557 -> after for each
275.207 -> where response is returning so i won't return the data here
278.7 -> all blogs of mine
282.421 -> will return them lets see if this works
284.934 -> here we have an error, path argument must be of type string
289.398 -> or an instance of buffer of url
291.638 -> receive type nan
293.152 -> so here nan is received lemme see what is the problem over here
296.742 -> blog data and item
298.603 -> i did console.log i have done the item how to learn flask.jsn
301.659 -> it is correct here
304.393 -> but path argument must be type strings of an instance
307.995 -> where is it
310.917 -> okay i don't have to put a comma here
313.65 -> now i am returning reload it shows me an empty array
318.255 -> and this is because
320.785 -> it didn't get the time to push and all blogs didn't get updated
324.156 -> so what have i to do
326.9 -> now i will use promises of mine
330.237 -> lets see how to do this
332.373 -> will use fs.promises.di
335.406 -> what will happen by using it
337.067 -> i will be returned a promise
339.155 -> so i will async this function , now you will ask
342.624 -> what is he doing now we cant understand anything, so i will explain
346.45 -> this function is asynchronized
349.351 -> which means if i do any async task in it
353.045 -> then i can await it
355.552 -> which means i can run it one after the other
357.162 -> by default java script doesn't run one by one
360.74 -> java scrip come to one line and then schedule and then this process is continued
366.314 -> s called asynchronized nature of java script
369.154 -> but here i will tell you how to change this behavior
375.954 -> if we use promises here
378.879 -> fs.promises.readDI i have used
381.56 -> here the need of call back function won't be required
389.194 -> i will comment everything out rather than making chaos
391.749 -> and i will write it again
394.328 -> and how will i write it
400.193 -> i will write let data = await
403.065 -> means wait till the promise gets resolved
407.178 -> i will say fs.promises.readdata and after that rest.status 200
412.89 -> now i will do the data and reload it
418.155 -> after reloading it is working perfect
422.689 -> now i am using promises
424.709 -> so i had to use await
426.086 -> now you brought all the data
429.804 -> not what to do use for each look
432.261 -> which means itreat the data
437.505 -> now i am doing i treat
439.034 -> and i am locking the item in console
441.278 -> the portion of fs.treatfile
444.527 -> i will use from promises but see from here the item will be printed from console now reloading
448.84 -> so the item is getting printed from console
452.198 -> now what will I do
453.484 -> i will do fs.promises.read file
457.059 -> that i am using promises
459.193 -> and i would recommend to read
462.358 -> read it
464.808 -> read it and into the read file i
468.486 -> i inserted path so i will get a promise
472.094 -> that my file
475.035 -> is equal to
476.405 -> i'll do upper let my file
478.533 -> i did let my file
481.91 -> i am doing let my file = await
485.017 -> wait for it
487.978 -> fs.promises.treat file
490.809 -> if i do console.treat.file here
494.709 -> now will reload it
496.39 ->
497.425 -> wait isn't allowed in non-async funtion
500.675 -> i will tell you what is the problem over here
503.582 -> here it is a function
506.464 -> so i can await here
508.075 -> so i wont use a for each look
509.699 -> i will use traditional forloop of java script
513.117 -> don't get confused and if you do
517.163 -> it will mean your java script is weak
519.7 -> i will write data instead of array
522.736 -> even if it weak doesn't mean you can't learn it
527.975 -> understand it how all this works
531.327 -> i will revise it all to you once it works
535.779 -> as this is all working
537.446 -> i will write item instead of element
540.573 -> item = data index
542.237 -> now i am reloading
546.363 -> so it is coming in my console, data is also coming
547.96 -> here the data is coming
549.604 -> the one which i had read file
551.076 -> here the argument of read file hasn't given yet
555.095 -> which utf 8 which is in api scent blog
559.756 -> i haven't given utf string that is why it isn't visible
563.696 ->
564.482 -> i'll give comma and write utf - 8
567.796 -> after that i will fix the brackets
573.595 ->
574.232 -> here i will save and reload
576.418 -> so
577.25 -> where you could see all now you can see the text
579.981 -> buffer is not seen
581.471 -> so here my data has come
586.209 -> now i won't console blog i will do which i had done earlier let all blogs =
591.377 -> something like this and will push in all blogs
596.187 ->
597.033 -> i will push my file
600.558 -> as my file is a text i will parse it
605.957 -> jsn
608.183 -> dot
609.268 -> parse
610.6 -> or my file
612.456 -> because my file is a string
614.137 -> and i have to parse and make an object out of it
616.408 -> and don't get confused
618.568 -> now i will return all blogs hopefully it will run
621.508 -> the thing which i wanted is done
624.627 -> i wanted all these blogs to be seen like this
627.725 -> now lets see how does it works
630.968 -> so with this one things will ensure more
633.8 -> which is
635.015 -> an ensure that
637.094 -> my data is seen in that order in which i had it read
640.712 -> now i can see a problem which is
643.141 -> that the index
645.273 -> that how to learn flask., java script, and index is not coming
649.16 -> but only same thing is been seen in it so i will lok for that
653.209 -> and i will catch that
655.361 -> you just see that
657.954 -> i have written it my files = awaitfs.promises
661.79 -> in all blogs, jsn.my file will be pushed
665.799 -> i have replicated all these files
668.934 -> so i will do how to learn flask to flask and
671.725 -> i will do next.js to how to learn next js
674.617 ->
676.514 -> now i will reload and it will get fixed
678.746 -> this is how we have fixed our API
682.949 -> now i have to read
684.819 -> i will have to read
686.99 -> will have to read the API, from where
690.441 -> next.js okay
692.944 -> so the mess made of files
695.24 -> i will cut it all so that it doesn't get messed up more
701.487 -> now my blog.js
704.037 -> i will use the api from it
706.13 -> i will use this api
708.145 -> i will use, use effect
711.064 -> i will use effect
713.442 -> use effect
715.919 -> use effect
717.65 -> and will use, use effect
720.447 -> and how will i use the use effect
724.149 -> something like this
726.595 -> here i will write console. log
731.421 -> use effect is
733.588 -> running
735.143 -> i will do it and will reload the page of blog
738.747 -> local host
742.089 -> blog
743.249 -> inspect
744.49 -> console use effect is running
746.737 -> i reloaded it and use effect is running which mean code is working
752.449 -> now i will use api and will fetch
756.344 -> and the blog of mine
758.764 -> i will fetch it
760.702 -> after it is fetched
764.006 ->
765.9 -> .then when it is fetched
770.426 -> will write A here
772.594 -> and here console.log A
776.007 -> infact this also returns promise
779.002 -> and will have to parse it so what will i do
781.386 -> that A over here
783.433 -> a . then i will have to do again
786.716 -> now you will ask what is going on here
788.709 -> again and again .then
791.854 ->
793.914 -> here i will write data and here parsed
799.315 -> is equal to data.jsn
802.246 ->
803.658 -> firstly i fetched it over here
806.538 -> then i waited to fetch after it got fetched it gave me a data
810.557 -> as the data got available i parsed it
814.427 -> now after that if i show you wile reloading
819.793 -> a.then is not a function is showed over here
822.05 -> what mistake did i do
825.6 ->
826.634 -> a,jsn i will do something over here
830.253 -> and here i will write return
832.406 -> so here is the problem
833.736 -> the function which i wrote
839.188 -> so here i will write return.a.jsn
843.996 -> and after that i will close this funtion
847.859 -> and this will return a promise which i will write a.then
852.623 -> and i will have to remove the bracket from here
856.283 -> hope i am doing it right and after that
859.345 -> here i wont have to do this
862.296 -> here i can directly write parse
864.716 -> and i think this should be fine
867.151 -> and i will reload it
869.778 -> and now all the three are here
871.97 -> why is this syntax of api that will also be told
876.159 -> why is .then twice
878.158 -> see the first .then brings the fetched data
883.152 -> and data fetching takes time
885.39 -> after taking time
887.614 -> after that it will parse and .jsn also returns a promise
892.631 -> till .jsn isn't parsed it will wait you up and as soon as it is done your console is locked
897.338 -> so here the data will be available
899.42 -> as the data is available i want
901.748 -> i will create a state and will write blogs
907.616 -> u state and for it
911.579 -> aren't we using the extension of react
917.712 -> es 6
918.212 -> es 7
919.221 -> we weren't doing that i have just enabled
922.533 -> use state
926.322 -> saved use state but it isn't getting used
931.294 -> used state snippet has come okay
933.938 -> blogs set blogs = use state
936.282 -> and here i will put an empty array
940.303 -> i will do set blogs parsed
943.583 -> set blogs parsed
946.284 -> now the blogs are parsed
948.758 -> now what can i do, here is a mistake by me
953.96 -> what is the problem here
955.294 -> the use effect is continuously running
959.763 -> so i will fix it
961.481 -> and this is fixed over here by reloading
962.834 -> now i will reload and i will run only once
965.813 -> why did i do this see it on my react course
968.741 -> now i will come to the point
971.418 -> and the point is that to our blogs we have to by using .map syntax
977.565 -> i treat okay
979.111 -> here i will write
981.277 -> blogs.map
984.472 -> and after doing .map
987.192 -> i will give a function
989.033 ->
989.892 -> and here i will return
991.979 -> and i will return a div, cntrl X
994.872 -> i hope i am doing it right
997.075 -> and the item over here
999.659 -> blog item
1002.755 -> and the item over here which is blog item. title
1008.961 -> and to it obviously
1012.323 -> will do this
1014.818 -> so the blog item. title is here
1016.729 -> and will how to will do the reload
1019.75 -> how to learn flask, java script, and next.js
1024.18 -> in which we have to give a unique key prop
1026.559 -> here i will writer key =
1029.677 -> and will write blogitem.
1033.953 -> is title a unique key
1038.2 ->
1039.627 -> title is unique but if i gave slug it would be better
1042.549 -> but to release the error i will keep it as it is
1046.514 -> so i will do like this
1048.003 -> i removed the sample blogs which i gave below
1051.167 -> i will reload so i see how to learn flask
1053.941 -> how to learn java script and next.js
1056.612 -> i want a slug to be here
1059.362 -> and where is my slug
1062.032 -> so here is my slug
1065.991 -> i will have to write and make an entry over here
1069.601 ->
1071.739 -> and i will write slug as how to learn next.js
1079.177 -> something like this
1081.228 ->
1082.379 -> will copy and save
1085.077 -> and here how to learn flask will come
1088.155 -> and here will be how to learn java script
1090.917 ->
1094.291 -> after doing all these when i will reload it
1097.815 -> slug b should be available so i will close all these files
1101.65 -> after closing it the blogs.js of mine
1104.814 -> sorry not blogs.js it is blog.js
1107.702 -> the content in the paragraph
1111.952 -> the blogitem.content of mine
1115.62 -> to that i will from 0 to 400
1119.86 -> but this is not python this is java script
1122.839 -> we will have to use .substr
1125.034 -> substr o ,
1128.205 -> 400
1129.771 -> so don't forget syntax of java script
1132.142 -> so how blog.item.title has come so it should be blogitem.slug here
1137.594 -> blog.item.slug
1140.081 ->
1141.524 -> but here will be a problem it is an ordinary string i have to convert it to back tick
1148.991 -> see if you know java script it will be easy for you to understand and now we are learning next.js not java script
1153.864 -> if you want to learn java script so come to my java script course
1157.874 -> key = this, here i changed content, title, blog items title is here
1164.542 -> div key = item is not the one i have to give div key = slug
1168.151 -> if i reload it here
1170.691 -> here it is a bit messed up
1175.77 -> the style is a bit messed up why is it so i don't know
1179.739 -> styles. container after changing it why is it messy i don't know
1185.53 -> but the links are updated very well
1190.492 -> you can see how to learn java script
1191.936 -> how to learn next.js, very good
1194.47 -> but why is it ruined
1197.644 -> why has the setting of mine mixed up
1201.282 -> i will see
1202.367 -> so the div here is wrapping it i want to see it
1205.826 -> which is wrapping
1207.263 -> what is the problem in main i have done
1211.803 -> blogs.map is returned and if i remove it
1215.568 ->
1216.529 -> and write here something
1217.884 ->
1219.264 -> so the styles are coming in between
1220.586 -> but after keeping blogs.map why is it happening
1224.586 ->
1226.056 -> i will have to fix this
1227.946 ->
1229.09 -> why is it not coming in center
1232.198 ->
1232.923 -> so the paragraph here is creating the problem and here i have to give
1237.165 -> class name = styles.blogitem
1241.422 -> so i will fix this too
1244.565 ->
1245.781 -> blog item p
1248.733 -> so the blog. p has to be inserted in blogs.modules.css
1253.829 -> so i will fix blog. module . css
1258.153 -> as i have written blog item h3 same as that
1263.055 ->
1264.232 -> write in blog item p and the max width of it
1267.381 -> won't increase more than 45 bw
1269.83 -> after doing that if i reload then it is in center
1274.791 -> i will have to do one more thing
1277.596 -> the blog item has been given 400
1281.272 -> 400 is much larger
1284.527 -> 40 is enough
1285.606 -> no not 40 i'll keep 140
1288.962 -> 40 is very less 140
1292.066 -> 140 is good guys
1293.886 -> according to me it is now you can reload
1297.927 -> you can place a button of read more and can do as you want
1301.872 -> and blogs may be seen to you
1305.033 -> so i hope you understood how to do about blog contact
1309.622 -> blog is good to go but the main content of blog
1313.076 -> is not getting fetched and that i will tell you to do
1317.12 -> and after that you'll know how to final shape the blog
1321.647 -> i hope that you all are enjoying and do access the playlist of next.js
1325.422 -> this much only in this video
1327.175 -> thank you so much for watching this video and i will see you next time
Source: https://www.youtube.com/watch?v=T_aH6sRlj6A