logo studio roma
EN / ES

Back to Blog

Sitemaps

Pablo Romera foto

Pablo Romera 

/

 September 07, 2023 / 4 min read

Pablo Romera foto

Efficiently Generating Sitemaps in Next.js

Introduction: The Importance of Sitemaps in Modern Web Development

In today’s competitive online space, ensuring your website gets the visibility it deserves is crucial. A sitemap plays an indispensable role in this. For those utilizing Next.js for their web development needs, integrating a sitemap efficiently is of paramount importance. This guide will walk you through the process using the npm package, renowned for its vast range of functionalities and easy-to-integrate code support.

The Exclusive Guide to Sitemap Generation in Next.js with npm

1. Initial Setup: Grasping the Basics

Before diving deep, it’s essential to be armed with a foundational understanding of Next.js app creation and the basics of npm and Next.js. This guide assumes you're already equipped with this knowledge, so we'll be focusing solely on the sitemap creation process.

2. Kick-start with Installing the NPM Package

The first course of action is to bring the next-sitemap npm package onboard. It's a powerful tool that's been specially crafted for projects like yours. Install it as a development dependency (-D) using the following command:

npm i next-sitemap -D

You can always refer to the official documentation for a detailed understanding.

3. Dive Deep into Configuration

Once the package is installed, the next step is to seamlessly integrate it with your project. Configuration is made effortless with Next.js. Here’s how to go about it:

  • Configuring the NPM Package

Start by creating a new file named next-sitemap.js inside your main project folder. Populate it with the default code provided below, ensuring you tweak it according to your website's specifics:

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
  outDir: "./out",
};

Create another file called next-sitemap.config.js inside your main project folder. Populate it with the default code provided below, ensuring you tweak it according to your website's specifics:

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
};
  • Incorporating the NPM Script

Configuration isn’t just about the package; it’s also about ensuring the scripts are set right. Add the following script to your package.json file:

"postbuild": "next-sitemap --config next-sitemap.config.js --sitemap-xml",
"sitemap": "next-sitemap --config next-sitemap.config.js"

This script ensures that the sitemap is generated post the build process, ensuring its relevance and accuracy.

4. The Grand Finale: Generating the Sitemap

With the configurations set, you’re now poised to generate the sitemap for your Next.js project. Simply use the command:

npm run build

Executing this command will generate the sitemap.xml file for your project, making it ready to guide search engines through your content. It’s worth noting that the next-sitemap package might produce multiple sitemap files, such as sitemap.xml (primary index file) and sitemap-0.xml (a subfile). Their names can be customized based on your requirements. If we want to avoid generating multiple files, we’ll need to add to next-sitemap.config.js the last line.

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
  generateIndexSitemap: false,
};

Check the documentation for further insights on this.

5. A Word of Caution

Always run the npm run build command followed by the npm run postbuild command for flawless execution. Avoid executing the npm run postbuild command directly in your Next.js application. Doing so may result in errors. Remember, while the postbuild command is optional, the next-sitemap npm package is designed to generate a sitemap automatically with the build command.

Conclusion: Embracing Efficiency and Visibility with Next.js and npm

Optimizing your website for search engines goes beyond just having quality content; it’s about ensuring that content is easily discoverable. By integrating a sitemap efficiently using the npm package in Next.js, you position your web platform for greater visibility and traffic. While other methods might provide similar results, the flexibility and robustness offered by next-sitemap npm package remain unparalleled.