Setting up dynamic content sitemap in next.js using typescript

In this post I am going to show you how you can setup a sitemap that contains infomation about dynamic pages generated by a single api endpoint in next.js using typescript.

First of all, three things to note;

• Am assuming that you have your main sitemap setup already using next-sitemap package. If you have not then read our Setting up a sitemap for next js using next-sitemap package to quickly set it up.
• If you are using next js getstaticprops with revalidation and getstaticpaths then this post is not required as pages are created for each dynamic data gotten from your api when you run build command . And revalidation ensures that new pages are also added for every new data you create hence when this pages are created they are added automatically to your main sitemap.
• Am also assuming that you have a .env file setup already.
• Also in this post I am using a django rest framework api for my backend.

Alright now that that's out of the way, lets begin

Step 1

Go to your env file and specify your WebUrl and ApiUrl as shown below

WebUrl = https://www.exampleweburl.com
ApiUrl = http://www.apiurlexample.com

Please pay close attention to this next part, I have tried my best to make it as simple as possible.

Replace https://www.exampleweburl.com with the actual url of your dynamic page domain. For example if the path to your dynamic page is pages/blog/[id] and your domain address is www.dev.com then you will replace https://www.exampleweburl.com with "https://www.dev.com/blog". 

Replace http://www.apiurlexample.com with the actual url of the data api. For example if the url of the api that returns a list of all the posts in your lets say blog is https://www.backendapi.com/posts then use that full url to replace http://www.apiurlexample.com.

Step 2

Go to your next.js application pages folder and create a new folder. Name the new folder server-sitemap.xml .Within that folder create an index.tsx file and paste the code below inside the file

import { getServerSideSitemap } from 'next-sitemap'
import { GetServerSideProps } from 'next'


const WebUrl = process.env.WebUrl
const ApiUrl = process.env.ApiUrl

export const getServerSideProps: GetServerSideProps = async (ctx) => {
    const response = await fetch (`${ApiUrl}`)
    const res  = await response.json()    
    const fields = []
    var x = res.map(data => ({loc: `${WebUrl}/${data.id}`, lastmod: new 
    Date().toISOString(),}))    
    var q = x.length
    for (let i=0; i < q; i++) {  
        fields.push(x[i])
    }    
    return getServerSideSitemap(ctx, fields)
}

// Default export to prevent next.js errors
export default function Sitemap() {}

First we are importing getServersitemap from our installed next-sitemap package.

Then we are assigning WebUrl and ApiUrl to the links specified in our env file

Next we make a fetch request to the backend api using the ApiUrl, and then we get a response.

Then we need to create an empty fields array. This will be poppulated later with the content we want to show in our dynamic site-map.

Next we create a variable x and using javascript map function we assign different objects to it based on the data gotten from our backend api.

Then using a for loop we push each of the objects in the x variable into the empty fields array.

Next we return our sitemap with the contents of the fields array.

Finally we create a default export statement to make next js happy.

Now, Next js is serving the dynamic sitemap from http://yourdomainname.com/server-sitemap.xml.

Step 3

Go to your main sitemap file which if you have read the previous post will be "next-sitemap.js" for mac users and "next-sitemap.config.js" for windows users.

Add the dynamic sitemap page in robotsTxtOptions.additionalSitemaps and exclude this path from static sitemap list in your main sitemap file as shown below. 

const URL = process.env.URL
module.exports={
    siteUrl: URL,
    generateRobotsTxt: true,
    exclude: ['/server-sitemap.xml'], // <= exclude here
    robotsTxtOptions: {
        policies: [
            { userAgent: "*", allow:"/"},
        ],  
        additionalSitemaps: [
          'https://yourdomainname.com/server-sitemap.xml', // <==== Add here
        ],
    },  
}

 

Conclusion

Through the process outlined above you are able to implement a sitemap in Next.js using typescript for your dynamic data being gotten from a single api  endpoint. This process can also be used to get data from multiple api endpoints with a little tweaking, check out our Setting up a sitemap  for dynamic data from multiple api endpoint post to see how it can be done. As always thanks for reading and if you have any questions concerning the post then leave a comment down in the description below and I wlll reply you as soon as i can.