Setting up a sitemap for next js using next-sitemap package

Hello, in this post i am going to show you how you can setup a sitemap for your next.js  website using the next-sitemap package.

After you have finished coding your website in order for it to get discovered by search engine crawlers you are going to need a sitemap. In this post I am going to show you how you can set up a sitemap for your next js website in 5 simple steps.

Step 1

Install the next-sitemap package into your project using the command below

npm i next-sitemap

Step 2

Next step is to go to your projects package.json file and under scripts add a new script called postbuild and set it to call next-sitemap like so

"postbuild" : "next-sitemap"

When you deploy your project to a hosting platform, its going to run those scripts in your package.json (i.e run build ) and when that is done the code above ensures that it also runs postbuild which will generate our sitemaps for us.

Step 3

In your code root directory create a next-sitemap.js file then copy and paste in the code below

const URL = 'https://www.example.com'
module.exports={
    siteUrl: URL,
    generateRobotsTxt: true,
    robotsTxtOptions: {
        policies: [
            { userAgent: "*", allow:"/"},
        ],  
    },  
}

In this code above our site url is https://www.example.com. Ensure to replace the site url with yours.

the generateRobotsTxt : true makes a robots.txt file to be automatically created with your specified settings.

robotsTxtOptions is used to specify our robots.txt settings for now with userAgent :"*" we are allowing all crawlers and with allow: "/" we are allowing them to crawl all pages.

Now in your terminal run yarn build or npm run build to build your application.If everything worked successfully at the end postbuild would be called and your sitemap will be generated inside your projects public folder.

If you are using windows you may run into the error below. How to fix it is explained in step 4 . If you are using mac or you didn't get any error then skip the next step. 

Step 4

To fix it install cross-env by using this command

npm install cross-env

Next go back to your package.json and replace the postbuild script you created with a new script i.e replace

"postbuild" : "next-sitemap"

with

"postbuild": "cross-env next-sitemap --config next-sitemap.config.js"

And also rename the next-sitemap.js file you created to "next-sitemap.config.js"

Now do an npm run build again, and everything should work successfully and if you check your public page you should see your sitemap.xml and robots.txt file.

Conclusion

We have been able to generate a sitemap for all the static pages in our next.js application using the next-sitemap package on both windows and mac operating systems. The next step is how to generate the sitemaps for dynamic contents that's been gotten from an api on page load. Depending on the file extension you are using read our Setting up dynamic sitemap for next js using Javascript  for javascript file extension type and our Setting up dynamic content sitemap in next.js using typescript  for typescript extension type. As always thanks for reading, if you have any questions about the post then leave a comment down below and i'll reply as soon as i can.