Next.js Tutorial #13 - Fetching a Single Item

  Рет қаралды 96,703

Net Ninja

Net Ninja

Күн бұрын

Пікірлер: 75
@maskman4821
@maskman4821 4 жыл бұрын
I guess Shaun will not talk about Server Side Rendering (getServerSideProps, getInitialProps function), this series covers Static Site Generation (SSG), and leave SSR and api route, for us to explore, I am glad I finally understand how /when /why getStaticPaths function works and why it has to work with getStaticProps function. Shaun is the only instructor who explains it. Thank you so much !!!
@LdaVinci88
@LdaVinci88 4 жыл бұрын
Yes, I hoped would be cover the API folder as well, because, for me, it is the most confusing part of Next, it is frustrating that I can't find quality materials that can explain well. For example, can we use the whole Express syntax here? Any middleware generally used with Express can be used here, how to connect to a database, and much more. I am delighted with the materials here, don't get me wrong, it's pure gold, it was just a personal desire, as a bonus, to cover this part as well.
@maskman4821
@maskman4821 4 жыл бұрын
@@LdaVinci88 yeah, that's exactly what I want to know because this is the power that nextjs gives us to build fullstack app in one project. we can build our api as well as database and put under api folder so that we don't need to create a separate backend project. Nuxtjs does the same thing but lack of tutorials. Hopefully Shaun talks about this important topic I think everybody wants to know how to handle server side render with Nextjs !!!
@LdaVinci88
@LdaVinci88 4 жыл бұрын
@@maskman4821 more and more materials started to appear, even full courses about the next js, BUT they all pass very quickly over the API folder, it's so frustrating especially as you said and that's the main difference, "his power" that next js give us!
@maskman4821
@maskman4821 4 жыл бұрын
@@LdaVinci88 yeah, nobody really talks about nextjs server side render seriously, so hopefully Shaun covers this topic sooner or later !!!
@abe10
@abe10 4 жыл бұрын
Pretty sure Shaun said he'd make another tutorial on advanced features of NextJs. So fingers crossed 🤞🏻
@MASTERISHABH
@MASTERISHABH 3 жыл бұрын
For guys asking about efficiency, if you have a large collection of items being returned then this is just 1 time where build takes some time fetches and stores every item as a cache. Now, it's ready to serve your users without requiring any extra fetches. WHEN you want to refresh your data, next refetches and regenerates only those HTML which have changed so the fetching is now lesser. Now if you're worried about fetching large collection of items where your users aren't actively consuming all the pages then add a filter to your API to return only the data which are used by the users. Some rare visited paths can always be set to client side only. This way you divide and keep solving problems like these although I haven't tested the build time with millions of static data like wiki articles but there would be workarounds for that as start working on such a scale. You face limitations a lot, you write your own framework on top of this or entirely fresh. That's up to you.
@maskman4821
@maskman4821 4 жыл бұрын
~Notes~ In previous tutorial, we use getStaticProps function to retrieve remote api and render ninjas list. But if we want to fetch a single ninja item, we have to apply both getStaticProps and getStaticPaths function inside dynamic route componet ([id].js/detail page component) Q: Why do we need getStaticPaths function ? A: Because we need to tell Nextjs how many html page needed to be made base on our data (remote api) Then in getStaticProps function we fetch the single item (id) and pass the data to detail page component to render the single item content ~To be continued~
@brothercaleb
@brothercaleb 4 жыл бұрын
You’re doing a great job providing commentary. Keep it up... many thanks 🙏🏾
@kierrboy8613
@kierrboy8613 4 жыл бұрын
very helpful! keep it up bro
@zlackbiro
@zlackbiro 3 жыл бұрын
What if we have 1.000.000 articles?
@aayushdhakal4142
@aayushdhakal4142 2 жыл бұрын
I don't understand this approach, if there are thousands of data then it's certainly not efficient to render all of them in one go. How am I supposed to make a paginated API call in this approach?
@omartrkzi
@omartrkzi 2 жыл бұрын
@@aayushdhakal4142 any answers yet ? would be helpful
@SamLuvsPizza
@SamLuvsPizza 4 жыл бұрын
Yes yes yes! It's like you know my work schedule 😂 More lunch time learning 🔥
@code_questing
@code_questing 2 жыл бұрын
You make this concept and Next.js in general very easy to understand and non-intimidating. Great tutorials, better than a paid one I've done.
@NetNinja
@NetNinja Жыл бұрын
Awesome to hear that, thank you! :)
@pedrocxbx
@pedrocxbx 3 жыл бұрын
Thanks for the tutorial, Shaun. I'm no expert but I have the impression that as the app grows, the prebuild for the html pages would slow it quite a bit, wouldn't it?
@longnhat6405
@longnhat6405 Жыл бұрын
great tutorial! you explain things so smooth! Thanks very much
@Shakeel714
@Shakeel714 3 жыл бұрын
Thank you Shaun for sharing your knowledge in a cool way. Your KZbin content are indeed very helpful in learning web dev tools. God Bless You.
@CodingNuggets
@CodingNuggets 3 жыл бұрын
Thanks again Shaun. Loved this series and always learn a ton from you. See you soon my friend!
@sharanggupta2619
@sharanggupta2619 3 жыл бұрын
Does next really pre-build a page for each item in our database/fetch results? What if there are 10,000 items in our database, but the user views only a few of them? Is it not inefficient having to have to prebuild pages when the structure for them all is the same?
@danielli3288
@danielli3288 3 жыл бұрын
then you would use ssr ( server side rendering) instead i assume.
@nikitazotsik3430
@nikitazotsik3430 3 жыл бұрын
I had same question but In documentation it is recommended that we use Static generation if we know data ahead
@uncleiroh162
@uncleiroh162 3 жыл бұрын
i think the server pre-builds them but the user doesn't fetch them until they request that page.
@MunkyChunk
@MunkyChunk 2 жыл бұрын
Given server builds once, it’s only slow for one run. Then they’re done and built and the client can grab any of them at no extra cost
@Azro-g3w
@Azro-g3w Жыл бұрын
Woah haha amazing thank you so much for this awesome tuts 😅
@ericzedd
@ericzedd 3 жыл бұрын
Shaun: "I'm just gonna try refreshing to see if this works" Me: **refreshes this video** "bruh.."
@nirvanzentinal
@nirvanzentinal 3 жыл бұрын
Wow excellant tutorial 😍😍
@zlackbiro
@zlackbiro 3 жыл бұрын
What if we have database with 1.000.000 articles? Did next will render all that and build paths for all articles? If so, thats is stupid and app will crash or couse server timout.
@briankibiku6137
@briankibiku6137 2 жыл бұрын
Thanks for the elaborate tutorial.
@NetNinja
@NetNinja 2 жыл бұрын
You're welcome! Thanks Brian :)
@suzanne_atkinson
@suzanne_atkinson Жыл бұрын
thanks for all this great information, it's making sense. What if we hav ea database that is interactive, and will be updated on the client side, by adding new ninjas or adding info about them? Can we still use this server side request ?
@quiausin3757
@quiausin3757 2 жыл бұрын
i dont know if it will work if instead of make request twice in getStaticProps and getStaticPaths we can add orther key like data that contain each ninja data in param object. So we can access it in getStaticProps as context.param.data like id. I dk if it make sense ?
@yaldakarimi3772
@yaldakarimi3772 3 жыл бұрын
First off thank you for your great tutorials, and secondly I have a question. Is sth like xyz-[id].js a valid dynamic route? And is it possible to get that id using useParams hook? Thanks in advance for the help
@anggurmerah3025
@anggurmerah3025 2 жыл бұрын
hello sir, i got error in when refresh is still error, how to fix it?
@TheyCallMeFelix
@TheyCallMeFelix Жыл бұрын
Will the fetch.json work in firebase?
@mahmudurrahman8104
@mahmudurrahman8104 3 жыл бұрын
Why don't use axios on useEffect?
@blazi_0
@blazi_0 2 жыл бұрын
You can use useEffect but when u use it your data will run on client side. This leads to weak seo and efficiency problems
@artursradionovs9543
@artursradionovs9543 3 жыл бұрын
I am trying to use the same method when I am fetching data from MongoDB. I created API from MongoDB, it is executing all items, but when I am applying this method to create a dynamic route for the clicked item, it gives me a JSON error. Does anyone know - why?
@davidmutua6971
@davidmutua6971 3 жыл бұрын
Just noticed the hard way that with Dynamic Routes I don't need state complications with Redux. (lol)
@Troy-ol5fk
@Troy-ol5fk 2 жыл бұрын
thank you !
@neneodonkor
@neneodonkor 2 жыл бұрын
If you are getting a data that's about 1000, is it wise for Next to statically generate details for all those pages?
@bigrabbit1967
@bigrabbit1967 3 жыл бұрын
One thing that comes to mind, is that this could lead to some repetition and repeated API calls between the different getStaticProps or getStaticPaths methods. Is there a way we can store and share data between these? I assume Redux wouldn't work because this all happens at build time.
@quiausin3757
@quiausin3757 2 жыл бұрын
I also think about that instead of just return 1 key as id of ninja, I think we can add orther key like data that contain data of 1 ninja and just get at getStaticProps as context.param.data, I dont if that work ??
@navninderbenipal4496
@navninderbenipal4496 3 жыл бұрын
this video series is awseom. I am learning next.js. Can you tell us how to changes the URL slug and return a string with text instead of an integer which fetched from [id] ?
@champechilufya1458
@champechilufya1458 Жыл бұрын
It will return whatever you put in the ref which will depend on your data, as for square brackets you can type anything it doesn't matter its just a variable
@rafael7425
@rafael7425 3 жыл бұрын
nice tutorial!
@rezaulmasum205
@rezaulmasum205 4 жыл бұрын
Could a make a tutorial how to make private route in Nextjs with jwt?
@maskman4821
@maskman4821 4 жыл бұрын
yeah, that would be great !!!
@ridl27
@ridl27 4 жыл бұрын
ty
@brucelee7782
@brucelee7782 3 жыл бұрын
So when we run npm run dev are we still building the pages at "build time"? I dont get it. Or should we run npm run build?
@blazi_0
@blazi_0 2 жыл бұрын
Build is production website When you do npm run dev this is just development server on you machine So don't worry about npm run build.
@ronaldsangunji362
@ronaldsangunji362 2 жыл бұрын
I cant display my single item, but am able to display all users detail, instead of ninja i used user don't know what i did wrong and have no error to help me backtrack on where i went wrong any assistance
@hasibulhasan6156
@hasibulhasan6156 3 жыл бұрын
I have a question. Suppose there is a product when I build this project the quantity of this product is 10. After 7 days the quantity of this product is 2. Should next.js auto update this quantity regularly or we need to build this project regularly.
@csabapadar9978
@csabapadar9978 3 жыл бұрын
This is also very confusing for me.
@Khairul_Alam
@Khairul_Alam 2 жыл бұрын
I have 3 classrooms and each classroom has 10 posts. How can I fetch posts by using a dynamic classroom id on getStaticPaths? How can I access the dynamic classroom id on the getStaticPath function? So that I can fetch data by using classroom id. Please help me.
@tawsifhaque9360
@tawsifhaque9360 3 жыл бұрын
when i type: npm run build in my terminal, i am greeted with an error, saying: cannot open 'trace'. wtf's that mean?
@jeremy2217
@jeremy2217 2 жыл бұрын
For those who have the same problem, try to close your other terminal ( the npm run dev ) and retry npm run build
@reggiee4280
@reggiee4280 2 жыл бұрын
@@jeremy2217 Thanks
@juanriwualdomeasco3465
@juanriwualdomeasco3465 3 жыл бұрын
How can i fix this error ???? Server Error TypeError: Cannot read property 'toString' of undefined
@rockfox5
@rockfox5 3 жыл бұрын
.toString() and then refresh or restart the server
@ahmedel-hindawi9226
@ahmedel-hindawi9226 3 жыл бұрын
My website became so slow at this stage I don't know why that happened
@ahmedel-hindawi9226
@ahmedel-hindawi9226 3 жыл бұрын
In the Ninja Listing section
@ahmedel-hindawi9226
@ahmedel-hindawi9226 3 жыл бұрын
I think it's due to my internet speed :((
@Cami555555Sheep
@Cami555555Sheep Жыл бұрын
if anyone else is having the pages not build when running "npm run build", if you have the error: > Build error occurred Error: Cannot find module 'sharp' just do npm i sharp and run build again
@alvarosena858
@alvarosena858 2 жыл бұрын
I'm studying Nextjs and I'm liking, but if i have 1.000,00 lines to be fetched? Is gonna be so lazy
@alvarosena858
@alvarosena858 2 жыл бұрын
Is a big and lazy processto fetch one object
@Klklpia
@Klklpia 3 жыл бұрын
good
@tarekmagdy5775
@tarekmagdy5775 Жыл бұрын
عالرايق
@mvdlele29
@mvdlele29 Жыл бұрын
looks to complicate
@DeepakVishwakarma-li8wq
@DeepakVishwakarma-li8wq 3 жыл бұрын
this is too adv for who did not now's about dynamic routing
@schandramouli8723
@schandramouli8723 Жыл бұрын
Hey, can you tell me fix for Failed to parse URL from /utils/id.json/? this is coming in const res = await fetch("/utils/id.json/");
Next.js Tutorial #14 - Deploying to Vercel
4:39
Net Ninja
Рет қаралды 127 М.
Война Семей - ВСЕ СЕРИИ, 1 сезон (серии 1-20)
7:40:31
Семейные Сериалы
Рет қаралды 1,6 МЛН
Air Sigma Girl #sigma
0:32
Jin and Hattie
Рет қаралды 45 МЛН
Next.js App Router: Routing, Data Fetching, Caching
14:32
Vercel
Рет қаралды 341 М.
Next.js parallel routes are awesome (if they worked correctly)
5:51
Learn Next.js 13 With This One Project
29:42
Web Dev Simplified
Рет қаралды 392 М.
Client-Side VS Server-Side Rendering - Data Fetching with Next.js
13:20
freeCodeCamp Talks
Рет қаралды 184 М.
Fetching with Next.js 14 - Course part 15
14:19
Codewithguillaume
Рет қаралды 60 М.
Fetching Data with Nextjs | 3 Different Patterns
7:51
Ras Mic
Рет қаралды 20 М.
Война Семей - ВСЕ СЕРИИ, 1 сезон (серии 1-20)
7:40:31
Семейные Сериалы
Рет қаралды 1,6 МЛН