Improving SEO with (Dynamic) Sitemaps in Next.js
Вставка
- Опубліковано 11 лип 2021
- In this video we'll use the next-sitemap package to generate sitemap.xml and robots.txt for our Next.js app. We'll also generate a dynamic, server rendered secondary sitemap for our app's dynamic pages.
---------- Course
Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. courses.leighhalliday.com/nex...
---------- Links
next-sitemap - github.com/iamvishnusankar/ne...
Starter Code - github.com/leighhalliday/next...
Source Code - github.com/leighhalliday/next...
---------- Connect
Join this channel - / @leighhalliday
Join me on Discord - / discord
Check out my course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
working on localhost but getting internal server error 500 on production server
This is the most clear tutorial straight to the point
Thanks for breaking this down into smaller, bite-size bits. Very helpful. New subscriber.
This channel is absolutely fantastic
As always, great video and extremely useful. Thank you Leigh
Thank you Helio!
Leigh Thank you so much. I needed to implement it the same way you did. It was a great help. These videos help a lot, maybe I should start making some as well.
Thank you very much for this content, it´s always useful to watch your videos on nextjs :)
I just wanna say how much your videos have helped me with nextjs. It’s a newer technology so there’s not a whole lot of help out there but I can always count on you for a lot of the answers. Thank you 🙏
Thanks Dave!! Really happy that they are helpful!
this is what I exactly want. Thank you sir!
Thank you so much, very clear, to the point.
This content is amazing! Thank you so much for all that extremely useful information.
Thank you! Glad you enjoyed it Luiz!
Very well detailed tutorial I must say
So easy! I just moved my site to Next.js, so I'm looking forward to getting this installed.
Thanks a lot for that, it was really helpful!
Great video man
May Allah Bless You with peace. You have solved a lot of my burden. Love from Pakistan
Love from Canada!
Awesome!
Thanks a lot! Worked perfectly for me
Excellent :)
Thanks! I've been looking for ways to solve this.
Nice :D Me too, I just learned it last week for a personal project.
Great video man. I honestly don't really use typescript, but nice job.
Hey Leigh!
Do you know if I need to switch to getServerSideProps if I am using getStaticProps in order to take advantage of next-sitemap? It seems I get all my dynamic pages, but I may be overlooking it.
Love all your content, thanks!
Your Goat!!
Thanks. It helped a lot.
Glad it helped!
Thank you!!!!!
Thank you))
Hi thanks for the video... A question, My website has more than 200k of pages, and it takes long to generate the sitemap in the node server, any way to handle this?
This is very useful, but how do you approach this if all the application routes are within a dynamic parent directory; like [locale]?
whats happend for marketplaces with tones of products ? is this way good for them? i have to get all the products from the api , it takes lots of time , isnt it ?
How can i do the same thing but using npm instead of yarn ?
hi, how do i manage the priority and lastmod? currently it show all with same priority and lastmod.
How can we create sitemap index file ?
ty
My pleasure, Alex!
i have multiple dynamic route how to do it
Your video is helpful. But one problem when I deploy this in vercel then this server-side dynamic sitemap pages not working.
It's showing me 500 internal Server Error.
What is the problem here after deploy in vercel?
yes, I was going to comment the same! I'm facing the same issue as well.
Hello Leigh, love the tutorial.
Say that I want to have a sitemap for all the users in my database, but there are over 20,000 users
and to fetch these 20,000 users, i have to receive them paginated, i.e: page 1 (first 500 users), page 2 (second 500 users), and so on, and i have to keep calling until there are no more pages left.
when creating the users sitemap, do i first load all of the 20,000 users and then generate the sitemap, and next-sitemap takes care of it by splitting it into multiple files,
or is there a way to load a given page X of users, and creating the sitemap specific for that page: i.e: users-sitemap/5
I'm just held back a bit by this approach, not sure what the google search engine prefers either.
Thank you!
Hey Youssef! I think you have to load all 20k user records into memory (even though that'll be done with multiple calls), and then the package will do the work of splitting them into multiple sitemap files. That said, I think a single Sitemap file can contain 50k records. I'd say just give it a try! My only worry is that it'll slow down your build/deploy considerably, so honestly at this size I would consider other approaches... maybe doing SSR with a week long cache.
I am in a situation where I am implementing the same way and I have an Nextjs Edge function powered by Vercel. The deployment is failing on Vercel and I do not have any solution for that till now
Please do let me know if you find the solution.
Is this compatible with Next-SEO?
i have done like that, but google search console said that's my site map get over 50.000 link. But i limit under 50.000, i don't know why?
Does this dynamic aproch work r if a new id comes in api after build is made in vercel for ex: like stack overflow a new question is added so a new id is made in production so will sitemap be generated for the new question ?
Yup! It should be calculated on the fly… unless you have caching turned on. You can try by visiting the page yourself in the browser and seeing what is in the XML file.
@@leighhalliday Hello. First, thanks for the tutorial. That doesn't work for me, I tried to implement in a blog and the sitemap file only update the links on build, any idea of can be happening? Thanks again!
working on localhost but getting internal server error 500 on production server
I have like 100k post and for example in 1 month added like 50k, if I do like this the sitemap file get so big, any solution?
Great 👌
I need to deploy nextjs on custom server not on vercel i don't know what to do
Any help would be appreciated
Hi, did you find solution?
nginx reverse proxy it
hi sir, i have a problem when i run yarn next-sitemap, the result of the public sitemap file becomes two, i.e. sitemap-0.xml and sitemap.xml.. is this okay for the future?
To resolve this issue, add the following line to your next-sitemap-config.js file:
generateIndexSitemap: false,
Now when you run, npm run build, it will create just one xml file called sitemap.xml. The next-sitemap documentation is poor and this issue is never even brought up.
and for pages that are generated after building it? Using fallback 'blocking' ?
If you want them in your site map file you’ll have to take the dynamic approach and add them yourself.
@@leighhalliday
In this case, do you say fetch all pages previously in the api?
I have 6 million pages. I don't think I can do this.
Hmm, That sounds like a lot to put into a site map haha. Does google support that many?
Did you figure out how the approach to fetch the 6 million pages?
I'm struggling with something similar, but its around 500 pages, but it still would take a long time for the backend to give me all the content
@@rafaelreale8848 I hope you solved your issue. Did mine by setting the siteMapSize according to the number of dynamic url options. It's avalable at the package's documentation.
So how do we handle multiple endpoints?
You’ll have to do multiple fetch calls to get all your data
@@leighhalliday Awesome, i get it
How can we implement in React js
That's a complicated question Ankit... by React I am assuming you mean "create-react-app" or something outside of Next/Gatsby/Remix. And if that's the case, I am honestly not sure... you'll need some sort of custom build step or server-rendered page if you want it to be dynamic.
i'm getting 404
you gotta make a patreon account 😂
Haha thanks Hassan. If you want to support you could either buy my course at next.leighhalliday.com or join the channel as a member :)
@@leighhalliday happy to be a member :)
Typescript really turn me off lol .
Thanks, however I did it a few months ago, it was easy
Nice! I did this for the first time just last week :)