 Hey, welcome everybody. In this video, I want to share how I made a dynamic XML site map using NexJS 14. To illustrate this, I will be using MongoDB as a local data source and I will go through setting up revalidation of the site map to ensure that fresh data is fetched at specific intervals of our choosing. Hey, welcome everybody and let's get started. I've already created a brand new NexJS project and for this tutorial, I'm going to be using a local MongoDB database which I've created earlier and we're going to be connecting to this website database that has a couple of posts. If we go to the official documentation of NexJS and I'm using the app router, so search for sitemap.xml. Essentially, we want to have something like this at the end of the video. If you scroll down a little bit more, here we have the generate a sitemap and essentially, we just need to add a sitemap.js file into our app directory and mostly just copy the code from here. If I select JavaScript instead and copy this code, let's jump into Visual Studio Code and insert the app folder. Let's create a new file called sitemap.js and let's paste the code here. Save it and if you have a look super quickly, this is a very basic sitemap where you have the URL of your website, the last modified which is using the current date and we have the change frequency, which normally goes as always, hourly, daily, weekly, monthly, yearly and never. And here at the bottom, we have the priority and essentially, this is optional, this is optional and this is also optional and the priority tells the search engine, the priority of the pages and normally it goes from 0.0 to 1.0 being the highest and as default, I believe that if you don't set priority, it's going to be 0.5 as default. And now if I save this and if I go back to the browser super quickly and make sure that this is running, yep, all good. And if I go to the website and put slash sitemap.xml, you should see that your sitemap is already working and I believe that my browser is making the XML look nice for me. Now let's have a look at how we can make this dynamic so the content comes from the database and then every time we add a new blog post, for example, we can refresh the content at some point whenever we like. I've already done the connection to my database. I've got it here in a .env local. Essentially, I've got a MongoDB URI connection, which is just a local connection for me. And I've got a next website URL that I might use for this example. The connection is actually fairly basic. Here, I'm going to show you super quickly. Essentially, I'm using the Mongo client. I'm bringing the MongoDB URI from the .env file. Basically, I'm checking to see whether I've already got a MongoDB connection before I create a new one here. So let's grab this and let's focus on our sitemap. So here at the top, I'm going to import my database. So import and I'm going to say connect to database. And this comes from at utils connect Mongo for me, the file that I will just show you. And now we can connect to the database. So from here, let's create a const and this const is going to be client equals and then await connect to database like so. But because we're using await, we need to use an asynchronous function. So async. And now we need to select or database const db equals client dot db. And then we put the database name, which for me is website. Here it is called website. And now we need to get the collection of posts. The next bit would be let's store all the posts into a const data equals await and db dot collection. We grab the posts collection. And then we find all the records by doing find curly brackets to get all and then to array. Now this should have all the records from database and we can potentially just do simple console the log and put the data inside here super quickly, save it, of course, nothing yet. But if you go to the site map and refresh, okay, we should get the results in here, which is great, which means that we can now live through them and insert them inside here. So let's remove this and let's live through them. So I'm going to do another const of post and then equals data, let's map through it. And then inside here, we can call this item, and then an arrow function, curly brackets and inside here, essentially, we want to loop through the data. I basically want to do exactly the same format as here. So I'm going to copy this based inside here. And now while we have the URL, we can potentially grab this from the dot EMV file, or you can just write it manually. I'm going to do it inside single slanted quotes, so I can do template literals. So I'm going to do dollar sign and then process dot EMV. Here we can finish the URL by doing post and then the actual slug from the database. Here I want to grab that. So this is going to be dollar sign and then item dot slug, like so. The last modified if you have this in your database, you can also bring this, maybe you have updated that and created that you can use that, then change your frequency to whatever you like. Maybe for this, I'm going to do monthly because blog posts don't get updated all the time. And the priority can be the default, which is 0.5. That's it. Now we need to grab the post and insert them into the current array. So maybe have a couple of pages in here that you want to keep manually, like the homepage, the about the blog. And now we can use the spread operator dot dot dot and then put the post inside here and you should continue doing exactly the same format. So if we save this, and if I go back to the browser and if I refresh, you should see that we're getting all URL from the dot EMV and the post and the slug from the database. This is generated from the current date and time. And yeah, everything is looking good. All right. Now let me zoom out super quickly just so you can see a little bit. So these are all the documents that we have. Now let's try to insert a new one. So I'm going to go back to my project here and I have some dummy data and I'm going to copy this record here. Let's go to the database and let's go here to post, insert document. And I'm just going to paste one more document, the art of cooking. So if I insert this, and if I go back to my website and refresh, you will see that this is also working, which is great. But the reason that this is working is because we're currently in dev mode and this means that Node.js is restarting the server and that's why it's getting the latest changes. But if I was to build this project, so I'm going to do npm run build and now let's do npm run start. Okay, we have our project running. If I refresh everything looks the same, let's try to add one more record. So if I add this one here, so insert document and here it is. So this one is space exploration. Okay, insert. And now if we go back to the website, so this website is running. And if I refresh, we don't, as you can see, we don't get the new record. And this is where we need to revalidate our page. So let me show you what I mean. So first of all, I'm going to delete those two records, like so. Now let's go back to the website, reload npm run dev. Okay, the record should be gone. Okay, those two records are now gone. Now if I go to the official documentation super quickly and if we search for revalidate and here data fetching, caching and revalidation, somewhere around here, you should, we should be able to find the one I'm looking for. Here it is. So we can use this code here to revalidate or page. So if I was to copy this and paste the inside here, this should revalidate the page mostly every hour. All right. So this number is in seconds. And if you wanted to revalidate every time for some reason, that might be a bad choice if you have a lot of records. But if you wanted to revalidate all the time, you can, you can potentially just put it at zero. But what I'm going to do now is put it at 30, which would give me 30 seconds in order to insert some data and show you whether this works. So if I save this, close everything and let's do npm run build, press enter. And now let's start our website as soon as this is done. npm run start. And now if I go to the browser refresh, we have the same records. And I'm going to copy super quickly this record here. Okay. And now if I go to the database super quickly, insert a new record. So new record insert. So this was the art of cooking. And if I refresh, as you can see, oh, just, just, I just done it. So it takes 30 seconds. And then it will reload the page. So I'm going to do another one super quickly. Let's see if I can do that. And now, as you can see, it's not adding a yet, but in a couple of seconds, sorry about the flashing lights. But in a couple of seconds, we should get the result. And I'm not gonna touch anything else. And here we go. The new row came out after 30 seconds. And so you can put your re-validation every couple of hours or so. And that's pretty much it. I hope that was useful. Thank you very much for watching. Like this video and consider subscribing. Bye.