Creating a site map can help search engines easily discover the content on your site, which can greatly improve your search ranking. Conventionally websites make available the site map at the route slash sitemap dot xml. For example, this is the site map for bullion art. Building a site map enable search engines to quickly and effectively locate the content on your site. Next year's provides a simple way to generate a site map dynamically by using a known path for your code file, which gets picked up by the next year's router. This file needs to be at the root of the app directory and it needs to be called sitemap.

You can use JavaScript or TypeScript. Hey, we are using TypeScript. We start off by importing the metadata route type from next vs. And then we export a default function that needs to return the metadata route site map. And you can even use an async function for your site map generator, which is why the return value over here is a promise to that site map. The site map is nothing more than an array of item. So we can start off by returning an FT array. And congratulations. If you now visit slash sitemap do XML. On our website, we now have a generated site map. It's conventional to have the first item.

It's just a website itself. And the URL over here will depend upon how you are going to deploy your site. Or alternatively, you can use the base URL, which is something that we covered in its own lesson. But to keep things simple, let's just use bullion art.com. Now this URL is actually going to be common across all the items that you add in the site map. So here's the neat trick. Leave this particular entry as empty and then map all of the items that you eventually plan to return. Modifying the URL and adding this as a prefix to the route URL. Note that we can use a lookup type, which is something that we covered in our TypeScript course

to get the type definitions of the site map item from the site map array. With these changes in place, our site map is no longer empty. We have one URL with a well-defined location. Since we are using an async function, we can make API calls and AWAI the result as well. For example, let's just load the list of product names from an external content management system. Note that this project contains dynamic routes for all the products. For example, slash product, apple product, orange product banana. And this project is an example that we built in a previous lesson. So given these product names, we can add them

to our site map with Stash product slash name. And with these product URLs added to our array, if you visit the site map in the browser, they show up over there as well. Beyond simply listing the URLs, you can even use the site map to inform the search engines of additional metadata. For example, the priorities of the different routes. When was the content on that route last modified, and how often do you expect that route to change? As a reference, here is the complete type definition for a site map item, and you can see that the only thing really required over here is the URL.

Let's play around with some of these properties. First up, let's take a look at priority. The default is 0.5, so let's bump up the priority of our site route all the way to the top, which is one. For our product pages, we still keep them high priority, but less than the root. So we use the value of 0.8. We expect our products to be changed every week. So we add a change frequency. And for the value use the string weekly. With these changes in place list, verify that the site map is working as expected. And no surprise, it looks fine with the new properties added. Note that the site map profile is caged by default. So if you have dynamic entries like this one,

a simple fix is to market as force dynamic. The exact values you use will depend upon your site and how you want to present it to the search engines, but at least now you have the tools to get the job done.