Next.js Tutorial - 23 - SSG with getStaticPaths
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2025
- 📘 Courses - learn.codevolu...
⚡️ Checkout Taskade! www.taskade.com/
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
SSG with getStaticPaths in Next.js
Next.js Tutorial on SSG with getStaticPaths
Give Taskade a try - www.taskade.com/
Use Coupon Code 'CODEVOLUTION' for 50% OFF lifetime discount applied to any upgraded subscription
1st 100 viewers to contact via www.taskade.com/contact get the upgrade for free!
Please bro make video on angular NgRx... Its really confusing. Your videos of angular help me lot. Please put video on angular ngrx
In case, you guys wondering if all the paths need to be hardcoded in getStaticPaths "one by one", no you don't. You can fetch the data in getStaticPaths and loop over it to avoid the manual work. This issue has been discussed in Tutorial 25 I believe.
Thank you I was wondering with this point :(
But then you need to fetch twice all the data?
Great tutorial. You helped me to get a grip on getStaticPaths as well as understanding how 'pre-rendering' works! Most important, about what is actually happening. Changing fallback to false really made me do my research. Your tutorials are appreciated. Thank you!
What is the difference between using useRouter and context to fetch route parameters?
VERY NICE!
I did all the things mentioned in this video, but when i click on each post, it shows a 404 error. why?
How did you create the dynamic segment page inside the pages folder? The value you put inside the square bracket '[ ]' should be that same variable you extract from the context object inside getStaticProps' and also return that same variable name inside getStaticProps' path objects.
check your components or pages case
Changing mode to development by running _npm run dev_ may solve this problem.
Nice tutorial. My only question is what if you have a huge ecommerce site with 1000s of products some to which might be unknown, and they all have dynamic segment pages. How are you going to handle getStaticPath? Can you bypass getStaticPath and just query the server for a single record inside getStaticProps just so you can have your page data available for SEO.
I await response to this brilliant question
I guess why not to use dynamic route to fetch the id ?
@@zyt2712 I tried but it didn't work, I guess context is not defined in getStaticPaths() ??
We used dynamic router to design a site with up to 1000 products. How to fix SEO? Because there is no separate page for each product.
What if we don't know how many Id's we will receive, how to make it dynamic inside getStaticPaths?
Suppose I am using an api where there are 1000 different objects and each has an array. So does that mean if I statically generate my those 1000 pages my api will be called only once while the build and I can show the same data to all my site visitors without anymore api call?
Just a suggestion. Do not cut the videos abruptly at the end. Soon after the video ends, we are automatically redirected to the next video and as a result, we do not get time to scroll down and like the video. Maybe give us like 5 seconds to like. 😅
Will keep in mind, thanks!
i'm a vue/nuxt developer, and i'm trying to learn react/next.. honestly, so far i must say the more i learn react the more i appreciate Vue/nuxt.. but i kept watching to try n find areason to love react, so far i havnt found any.... now this
whats with the whole getStaticPaths thing, like why do i hav to specify the paths in ahrd code? its a dynamic route, its possible value could be unknown.. even if they r known, what if the possible values are 1-500? so i have to create 500 paths?
stuff like this is why i wonder why and how react became so popular, these kind of things are so much simpler and more straight forward with nuxt... i really dont get it, i'm struggling to find a reason to use next over nuxt
after some tinkering, i have been able to figure to loop through and get the paths dynamically.. but still, the process and code syntax just to be able to do this is so messy on next compared to nuxt
Hi thanks for the video.. We always eagerly waiting for your content.. Could you please clarify in this tutorial getstaticPaths params are hardcoded, how we can do with dynamic instead of hard coding.. Thanks..
Exactly
@@GeorgeArthurjoe You can fetch the content in getstaticpaths and map over it
export const getStaticPaths = async () => {
const response = await fetch(`.../posts`)
const posts = await response.json()
const paths = posts.map(post => ({
params: {
id: post.id.toString()
}
}))
return {
paths,
fallback: false
}
}
@@ryanpereira9499 but this is called during the building ... If we have a new post , Do we have to build again everything ?
i followed the code and the result was 404 ?
getting this issue with Error: Failed to collect page data for /posts/[postId] when running command npm run build
if we have to pass static possible value in getStaticPath method then what is point to use an api ?
did you get answer ? if yes please explain .
I got an error when I user fragment .
Why not just use the useRouter?
not very clear explanation "possible route values for prerendering", why should it care what's possible
I did the same, but it did not work!
I am from the future...You don't need all these from NEXT.JS 13... a simple fetch query with cache context will do...
i don't get it, what do you prefer a static generate content, if you need static content why i'm going to use react, it very confuse
Sir if we have 1000 postIds then we specify the 1000 paths...???
try this:
export async function getStaticPaths(){
const paths = [];
for(let i = 0; i