Improving SEO with (Dynamic) Sitemaps in Next.js

Рет қаралды 37,232

3 жыл бұрын

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

Пікірлер: 79

@leighhalliday 2 жыл бұрын

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

@FarhanAhmed1360 2 жыл бұрын

working on localhost but getting internal server error 500 on production server

@RdozeTV 2 жыл бұрын

This is the most clear tutorial straight to the point

@bigLoser818 Жыл бұрын

Thanks for breaking this down into smaller, bite-size bits. Very helpful. New subscriber.

@daveisdead 2 жыл бұрын

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 🙏

@leighhalliday 2 жыл бұрын

Thanks Dave!! Really happy that they are helpful!

@76Freeman 3 жыл бұрын

As always, great video and extremely useful. Thank you Leigh

@leighhalliday 3 жыл бұрын

Thank you Helio!

@imsarvesh_ 2 жыл бұрын

This channel is absolutely fantastic

@ali_kazmi_ Жыл бұрын

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.

@mohamedboufraine9368 2 жыл бұрын

Thank you very much for this content, it´s always useful to watch your videos on nextjs :)

@tire Жыл бұрын

this is what I exactly want. Thank you sir!

@angelmcorrea1704 2 жыл бұрын

Thank you so much, very clear, to the point.

@aleemehsan761 2 жыл бұрын

May Allah Bless You with peace. You have solved a lot of my burden. Love from Pakistan

@leighhalliday 2 жыл бұрын

Love from Canada!

@LuizFerK 2 жыл бұрын

This content is amazing! Thank you so much for all that extremely useful information.

@leighhalliday 2 жыл бұрын

Thank you! Glad you enjoyed it Luiz!

@TheHimu30 2 жыл бұрын

Very well detailed tutorial I must say

@anthony_riera Жыл бұрын

Thanks a lot for that, it was really helpful!

@FarhanAhmed1360 2 жыл бұрын

Great video man

@jaza7613 2 жыл бұрын

Awesome!

@Skillthrive 2 жыл бұрын

So easy! I just moved my site to Next.js, so I'm looking forward to getting this installed.

@chris_and_music 2 жыл бұрын

Thanks a lot! Worked perfectly for me

@leighhalliday 2 жыл бұрын

Excellent :)

@miscany 2 жыл бұрын

Great video man. I honestly don't really use typescript, but nice job.

@dylanpayne9954 Жыл бұрын

Thank you!!!!!

@exactzero 3 жыл бұрын

Thanks! I've been looking for ways to solve this.

@leighhalliday 3 жыл бұрын

Nice :D Me too, I just learned it last week for a personal project.

@siumauricio2673 2 жыл бұрын

Your Goat!!

@kadyratamuradov8687 Жыл бұрын

Thank you))

@tomek4132 2 жыл бұрын

Thanks. It helped a lot.

@leighhalliday 2 жыл бұрын

Glad it helped!

@TheVGJournal Жыл бұрын

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!

@anthon952 2 жыл бұрын

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?

@ridl27 2 жыл бұрын

@leighhalliday 2 жыл бұрын

My pleasure, Alex!

@israel5450 7 ай бұрын

This is very useful, but how do you approach this if all the application routes are within a dynamic parent directory; like [locale]?

@CodeXpertiseHub 2 жыл бұрын

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?

@uancamilo 2 жыл бұрын

yes, I was going to comment the same! I'm facing the same issue as well.

@hamed4451 2 жыл бұрын

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 ?

@TechSignn Жыл бұрын

How can i do the same thing but using npm instead of yarn ?

@youssefkanbour9308 2 жыл бұрын

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!

@leighhalliday 2 жыл бұрын

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.

@azizee 2 ай бұрын

hi, how do i manage the priority and lastmod? currently it show all with same priority and lastmod.

@omarhosny9354 3 жыл бұрын

Great 👌 I need to deploy nextjs on custom server not on vercel i don't know what to do Any help would be appreciated

@GeniusHawlah Жыл бұрын

Hi, did you find solution?

@jamestucker4800 Жыл бұрын

nginx reverse proxy it

@AbhishekSingh-ee2bo Жыл бұрын

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.

@funnynews341 7 ай бұрын

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?

@mlnima 2 жыл бұрын

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?

@vivekknShots 2 жыл бұрын

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 ?

@leighhalliday 2 жыл бұрын

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.

@LuizGustavo-wr7rm 2 жыл бұрын

@@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!

@wanfahdiva4808 2 жыл бұрын

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?

@skverskk Жыл бұрын

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.

@niketchandivade3311 2 жыл бұрын

How can we create sitemap index file ?

@TheBoglodite 2 жыл бұрын

Is this compatible with Next-SEO?

@user-uu8tt5xx8c Жыл бұрын

i have multiple dynamic route how to do it

@rafaelreale8848 2 жыл бұрын

and for pages that are generated after building it? Using fallback 'blocking' ?

@leighhalliday 2 жыл бұрын

If you want them in your site map file you’ll have to take the dynamic approach and add them yourself.

@rafaelreale8848 2 жыл бұрын

@@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.

@leighhalliday 2 жыл бұрын

Hmm, That sounds like a lot to put into a site map haha. Does google support that many?

@youssefkanbour9308 2 жыл бұрын

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

@zidanegimiga Жыл бұрын

@@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.

@TshepoShere 3 жыл бұрын

So how do we handle multiple endpoints?

@leighhalliday 3 жыл бұрын

You’ll have to do multiple fetch calls to get all your data

@TshepoShere 3 жыл бұрын

@@leighhalliday Awesome, i get it

@FarhanAhmed1360 2 жыл бұрын

working on localhost but getting internal server error 500 on production server

@ankitsinha5127 2 жыл бұрын

How can we implement in React js

@leighhalliday 2 жыл бұрын

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.