To let the search engine bot know where to find a page and when it was last changed. Let me show you how you could set this up for a 'yarn export'ed Next.js project.įirst, we'll need to take a look at the info a basic sitemap needs to have. a sitemap.xml, even in an automated and always up-to-date way? There are some key files you want to serve in the root of your exported package, but Next.js only supports copying files from the /static folder out of the box. The best thing about it is that if you’ve routes from an e-commerce solution you can add those routes to the all_links variable and add them to your sitemap directly.Hurray! You created all the components and styling for your beautiful and performant Next.js website. Since you also have access to the parent_id you can also build out breadcrumbs and whole menus. The same setup is also used in NuxtDoc to generate the routes we need to build out a static version of it.
We use the same approach to generate our Sitemap but with another technology.
#Nextjs sitemap how to
You’ve now learned how to access the links API and use it’s content to generate a sitemap. let's output the Sitemap XML with encoded HTML charactersĭocument.querySelector('#linksresponse').innerHTML = sitemap.replace(/&/g, '&') You can do the same with every other technology in a similar way. We will use the total header of the response to generate all requests we need to perform and execute them to load our links.
#Nextjs sitemap code
You can check out the example code for this using Axios.
#Nextjs sitemap update
Doing it like that you will never have to update the per_page parameter if you will have more than 1000 content-entries. To be able to load more than 25 we can either add the per_page parameter or (our recommendation) load it in a paged manner. Each of those properties is one UUID (a reference to a content-entry or folder). The result you can see above is an object with 25 properties. Let preview_token = 'bZhHNuvF3MwCX11cXstx4wtt'ĭocument.querySelector('#linksresponse').innerHTML = JSON.stringify(result.data, null, 2) The structure of this is not an Array as the Stories collections since with the Links API you should be able to access all information of another content entries UUID instantly. To get you started we will do a simple GET request to load a list of links. You can find a documentation for the Links API and all its parameters linked right here. Instead, you will have access to all properties you would need to create all kind of hierarchy structures like:Īnd also a simple flat sitemap as we do in this tutorial. The It allows you to easily access all your content-entries without actually loading their content. It includes a basic NuxtJS setup, Storyblok content structure and components and also a deploy step for Netlify Let’s start NuxtDoc is a NuxtJS setup that helps you get started with your own documentation pages. To do so I’ll use the content of the Storyblok space: NuxtDoc.
We want to access to Links API to generate a sitemap for our project according to our content entries in Storyblok. We will use JavaScript to load the content and display it on a website to get you the idea. So we will demonstrate how to use the Storyblok APIs to create a sitemap according to content-entries. Some of you already asked to receive a tutorial on this topic.
0 kommentar(er)
