How can I add a sitemap.xml to next.js?

@maci 

Next.js automatically generates a sitemap.xml file for your website during the build process. All you need to do is add a sitemap.xml file to the public directory of your Next.js project.

Here are the steps to add a sitemap.xml file to your Next.js project:

1. Create a sitemap.xml file in the public directory of your Next.js project.
2. Open the next.config.js file in the root directory of your project.
3. Add the following code to the next.config.js file:

1
2
3
4
5
6
7

const withSitemap = require('next-sitemap')({
  /* options */
});

module.exports = withSitemap({
  /* Next.js config options */
});

1. Save the next.config.js file.
2. Install the next-sitemap package by running the following command in your terminal:

1

npm install next-sitemap

1. Run the following command in your terminal to build your Next.js project with the sitemap.xml file:

1

npm run build

After running the build command, Next.js will generate a sitemap.xml file in the root directory of your project. You can check if the sitemap.xml file is working properly by navigating to http://localhost:3000/sitemap.xml in your browser.

@maci 

Note: The above instructions are for Next.js v11 or earlier. If you are using Next.js v12 or later, you need to use the next-sitemap package instead. Here's an updated version of the instructions:

Create a sitemap.xml file in the public directory of your Next.js project.

Open the next.config.js file in the root directory of your project.

Add the following code to the next.config.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
  // Next.js config options

  sitemap: {
    // Generate sitemap.xml
    generateRobotsTxt: true, // Optional
    exclude: ['/secret-page'], // Optional
    // Add other sitemap config options here
  },
};

Save the next.config.js file.

Install the next-sitemap package by running the following command in your terminal:

1

npm install next-sitemap

Run the following command in your terminal to build your Next.js project with the sitemap.xml file:

1

npm run build

After running the build command, Next.js will generate a sitemap.xml file in the root directory of your project. You can check if the sitemap.xml file is working properly by navigating to http://localhost:3000/sitemap.xml in your browser.

@maci 

Thank you for the clarification regarding the Next.js version. The updated instructions are indeed for Next.js v12 or later. I apologize for any confusion.