Next.js Tutorial #12 - Dynamic Routes (part 2 - getStaticPaths)

[@philsmithies]

After stabbing in the dark trying to do this without a tutorial I gave in and watched it. This really explained getStaticProps - thanks!

[@mohamedabdel-wahed2427]

Waiting these series to finish to watch them all together :) I hope you make series on typescript with react or next

[@ridl27]

yep it'd be nice

[@abhishek.rathore]

Yea a full stack app with Typescript and NEXT.js will be super awesome

[@turbofuture1]

Sonny Sangha has a tutorial on all of those things: kzbin.info/www/bejne/f2PHlKOXqdZoatE

[@Shakeel714]

Learned a lot so far from your Next JS series. Thanks lot Shaun, the real net Ninja.

[@attilavarjas4881]

And we gonna see how to do that NEXT! I see what you did there :D

[@RobertWildling]

So if I happen to have a data resource with one million items, this will generate one million pages??? EDIT: The answer is in video 14of this series: dynamic paths can be generated, when they are first requested. Not covered in this series, but most likely in an upcoming one. Awesome! Looking forward to what the KZbin overview page will tell me tomorrow about new videos of yours!

[@maskman4821]

~Notes~ Dynamic route (Route parameter) Part 2 If we want to generate dynamic route page components at build time, we use getStaticPaths function to handle the task 1. Inside detail page component (ninjas/[id].js), we invoke getStaticPaths function to fetch remote api to get ninjs list item detail page, example~ 'export const getStaticPaths = async () => { fetch() } 2. To get the path of the id of the ninjs list item, we apply map function and return paths and fallback objects 3. we can also review this topic in full reactjs series where we use useParams hook to achieve dynamic routing ~To be continue~

[@MickenCZProfi]

Thank you for sharing your notes, that's so nice of you

[@SLP1177]

I love this chanell. I'd like "The Net Ninja" make a new series in GraphQL.

[@robertyarborough9363]

Great Tutorial! It should be added, that without a getStaticProps method, getStaticPaths method does nothing.

[@AngrejKumar]

Thanks buddy for explaining it in such a way.

[@NetNinja]

No problem Angrej! Hope it was helpful :)

[@oshri1997]

Thanks for all your tutorials! Please make a tutorial for matirial ui.

[@andikakurniawan4188]

Thanks the Net Ninja, you're great ninja

[@NetNinja]

Thanks Andika!

[@kiranvilla1358]

What if the response data contains millions of records or pagination? It will take a lot of time to map the params right if the data length is very huge. What to do in this case?

[@bazy1983]

I was wondering the same! It doesn't make sense to make pages for each row of your response data, or data that changes based on a query parameters!

[@SupaMC_Gaming]

@@bazy1983 You can limit which parameters are shown. For example if you only want to display 10 users. Also from seeing [id].js, it takes in and creates any page. if you did /ninjas/asd, you'd still get a page. The only difference is limiting how many you can see. Even with millions of data, it'd be fully possible.

[@learnsimple4592]

I guess someone will have to change the title sooner or later, really nice and easy tutorial though :) thank you !

[@NetNinja]

I blame my keyboard 😂

[@learnsimple4592]

@@NetNinja haha

[@adamaslan1]

Still helpful as of Feb - 24 2023!!! Although it does seem like next13 adds some other ways to do this, but without tutorials and all the related issue history...it will take a lot of time to actually implement it if youre inexperienced with dynamic routes and or fetching blog data from a db ie most people!

[@livetocodeltc48]

This is really great tutorial!!!! But I rarely hear about NEXT.js. There's a first time for everything 🤗

[@thith_thin]

thank you bro for a good lesson

[@pratapkumarsahu8717]

Awesome tutorial

[@YuyinSports]

I really hope you make the future series for fallback: true pages. At lot of power in that complexity.

[@safiqlodi834]

What if there are 10000s of data? Then Next will create 10000s of static pages and build time?

[@RobertWildling]

Wanted to ask the exact same thing. ​Shaun, any chance for an answer on this one?

[@JashwantSinghChaudhary]

Yes, it will. But when you have too many pages, you should use fallback: true. If you have 1000 posts, just fetch preferred 100 pages at build time and rest 900 pages will be dynamically fetched at runtime.

[@safiqlodi834]

@@JashwantSinghChaudhary Thanks! So, I should use getServerSideProps at runtime in this case? For example - getStaticProps at build time with fallback and getServerSideProps for the rest?

[@JashwantSinghChaudhary]

​@@safiqlodi834 No need. If page was not in list of getStaticPath, and thus cannot be displayed from static html, then fallback: true will show an empty page and load the page in background. Once loaded, it will be displayed. Till then, you can show loading indicator, or you can set fallback: blocking and it won't load the dynamic page until background fetch is complete ( just like php website ) getServerSideProps is not related with this. It's suited for websites, where we don't use getStaticProps and content is changed frequently. p.s. I am also learning, so I may not be 100% correct.

[@Ja-rz9fq]

I dont get this at all, why would we even create 10 static pages when we can create one at a time on user request? I mean can we? Im learning nextjs and maybe Im completely wrong, but Im thinking the same as we for example send props to particular components and then use those props, we can same do with this ID, just send the user to ninja/someId and somehow keep track of that "someId" and do something like getServerSideProps and get data from the databse for that particular ninja... FOr that time we can show loading screen or something, but I really dont get creating many static pages for nothing. Can somebody explain this

[@allex204]

Can you please show how you would do a burger menu for mobile devices? I'm struggling to make it work for my site. Thanks for amazing tutorials as always!

[@nitishbisht8950]

Thanks for the video, i just want to know why we use toString method for Id

[@abe10]

Hey Shaun, love your tutorials. Just wondering if you have any plans to cover Chakra UI in coming months. It's been gaining a lot of traction lately.

[@wisdomosara9750]

For a project that needs a lot of dynamic routes pages ....would this be a good idea?

[@ridl27]

ofc no. especially if content will change too often..

[@wisdomosara9750]

@@ridl27 Okay..thanks just wanted to know

[@YuyinSports]

yes it will, but you would have to specify the fallback key to true. nextjs.org/docs/basic-features/data-fetching check the documentation, it's explained there in more detail." When is fallback: true useful? fallback: true is useful if your app has a very large number of static pages that depend on data (think: a very large e-commerce site). You want to pre-render all product pages, but then your builds would take forever."

[@wisdomosara9750]

@@YuyinSports thanks...👍

[@SamLuvsPizza]

Yes!

[@tribaldeni]

you explain better that ChatGPT

[@NetNinja]

Aha, thank you Deni!

[@wchorski]

strange. when I hover over this video, KZbin adds a transparent to black gradient over the bottom edge of the video frame. This reveals white boxes around your UI Links. It's like the white boxes are rendered on top of the Video frame...? 🤔🤔

[@manavpatnaik222]

Wont generating so many pages before rendering become inefficient, I mean they could take up a lot of space. Dynamically generating only required pages seems like a better solution here, like we do in react. Am I right? Please correct me if I am wrong. Also Shaun, thanks a lot for your tutorials.

[@FitnessChaos]

Same thing i was thinking as well. If this was a real production website, was an ecommerce store or a data site. Generating > 200, 000 pages will become pretty inefficient.

[@MawuliMensahUSK]

Looking at the comment section this same reason. Any better solution?

[@manavpatnaik222]

@@MawuliMensahUSK check video 14 of this series. Other comments say the answer is over there

[@MawuliMensahUSK]

@@manavpatnaik222 Alright. Thanks much.

[@SayJee]

Can you do a "Stripe" tutorial? that would be a gold mine

[@bogdanma102]

I dont very well understand if there will be more ninja in the future next will generate the pages for that

[@mauricechisom8353]

So what happens when a new record(s) is created on the db?

[@slayer5171]

Why do we need to fetch all the data again? Can we just get specific data from the endpoint? Because I think there is so much resources that we can save.

[@ahmedfattal9569]

Making many network requests in this case is fine - they are made during build time to generate pages, not at runtime. So there is no performance hit. as Shaun said

[@dailymeow3283]

How about dynamic routes with SSR, i'm trying to do it, but 😔

[@kylehenson2259]

you are Great ..... Great... Great

[@ridl27]

ty

[@Khairul_Alam]

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.

[@vitorrazdorov6017]

I do not understand a little why explain next how many we have going and what they are, and if there is pagination on the site or there are 100 of them?

[@thesorus]

late to the game, great tutorial.

[@EVA_Hamza]

What does mean fallback pages ?

[@pikolq7665]

how to place the footer down ? plz tell

[@martintorres5719]

Hi, how are you?. I have a question, what i have to do if I got a max number of page only? What kind of items can recieve params? i have to do a loop with all params, or set fallback true (i got at least 240 pages) and set a certain quantity of pages?

[@martintorres5719]

well, sorry, more than one question xd

[@Azro-g3w]

"automagically" 😂

[@kuriasjoy]

If index routing whats the code ?

[@petecodes]

Can anyone tell me what I need to do to use this code on the index.js file? I want the data outputted to the home page.

[@mostmojo]

Make the async / await request in your index file instead :)

[@petecodes]

@@mostmojo ha, I feel dumb now! It's working now. I think I had jumbled up my code before. Thanks!

[@nandit.s]

Error: getStaticPaths was added without a getStaticProps in /ninjas/[id]. Without getStaticProps, getStaticPaths does nothing I am showing this error If any one can help me please Thanks in advance

[@gradientO]

Is the source code available?

[@NetNinja]

Yeah it's on github, the link is in the description. Just select the lesson-12 branch for this lesson's code.

[@massarde9591]

Can someone clarify for me what is the difference between use -> getStaticPaths + getStaticProps instead just use Index.getInitialProps = async ({ query: { id } }) => ... Both seems do the same job .GET users/id} but one is 6 lines of code the other is like 20. Many Thanks :)

[@prashantchoudhary3229]

Hi

[@Fushi-ec9py]

tutorial sesat, kelak akan di diadili di akhirat