Creating a Sitemap for your NextJS Website

A Sitemap is an very important part of SEO. It's typically an XML file that contains a list of URLs from your website along with additional information like when each page was last updated and how often it changes. This information helps search engines like Google crawl and index your website more efficiently, which can improve your website's visibility in search engine results.

So, In this post, We will create a sitemap for Next.js website using the next-sitemap NPM package.

Steps to create a sitemap

1. Install the next-sitemap npm package

yarn add next-sitemap

OR

npm install next-sitemap

2. Create a next-sitemap.config.js configuration file In the root directory of your Next.js project.

Here's a basic example of what the next-sitemap.config.js file might look like:

module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true, //its generate robots.txt in public folder.
  autoLastmod: true, 
  changefreq: false,
  priority: false,
  generateIndexSitemap: false 
}

Note: environment variables is comming from .env file by default.

It will see something like this:

SITE_URL="https://example-main.netlify.app/"

3. Add sitemap generation script to package.json

"scripts": {
  "build": "next build & npm run sitemap",
  "start": "next start",
  "sitemap": "next-sitemap --config next-sitemap.config.js"
}

4. Generate the sitemap

yarn run sitemap

OR

npm run sitemap

Output:

sitemap.xml created in your public folder.

Note: If you are deploy website on production then build command will be:

npm run build //its run both next build && npm run sitemap

Once your site is deployed you can check it here: https://example-main.netlify.app/sitemap.xml

It will see like:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example-main.netlify.app</loc>
<lastmod>2023-10-14T10:21:13.992Z</lastmod>
</url>
<url>
<loc>https://example-main.netlify.app/about</loc>
<lastmod>2023-10-14T10:21:13.992Z</lastmod>
</url>
<url>
</urlset>

Conclusion

Creating a sitemap using the "next-sitemap" npm package for a Next.js website is a valuable step for improving your website's search engine optimization (SEO) and ensuring that search engines can effectively crawl and index your site. Here's a summary of the key points and benefits:

1. Improved SEO: By providing search engines with a well-structured sitemap, you make it easier for them to discover and index all the important pages on your website.
2. Crawling Efficiency: Search engine crawlers can use the sitemap to navigate your website more efficiently, ensuring that all relevant pages are included in search engine results.
3. Frequency Control: You can specify the update frequency for each page in your sitemap, indicating how often the content is updated. This helps search engines understand the importance of different pages.
4. Priority Control: You can assign priorities to pages, indicating their relative importance within your site.
5. Error Detection: Sitemaps can highlight errors such as broken links or missing pages, allowing you to address these issues quickly.
6. Easier Submission: You can submit your sitemap to search engines like Google via webmaster tools, making it simpler for search engines to recognize and index your website.
7. Automated Generation: The "next-sitemap" package allows you to automate the generation of your sitemap, which is particularly beneficial for websites with frequently changing content.
8. Integration with Deployment: You can integrate the sitemap generation into your deployment process to ensure that it's always up to date.

It is very easy and quick way to create sitemap for your websites without need any writting code, you can also create a sitemap for typescript or reactjs websites.

No need to add manually sitemap in public folder.

No need to use getServerSideProps for create sitemap.

No need to use Static Site Generation (SSG) for create sitemap.

Happy Coding! ❤️