How to generate a sitemap (SEO) for Next.js project

Welcome back to Webzone Tech Tips

To generate a sitemap in a Next.js project, you can use the next-sitemap package. Here's how you can set it up:

 

1 Install the package: Open your terminal and navigate to yout Next.js project's root directory. Run the following command to install the next-sitemap project:

npm install next-sitemap

 

2. Create a sitemap configuration file: In the root directory of your Next.js project, create a new file named next-sitemap.js on the root folder. This file will contian the configuration for generation the sitemap

Add the following code to the next-sitemap.js file:

        
module.exports = {
	siteUrl: '<YOUR_SITE_URL; >', 
    generateRobotsTxt: true, 
}

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

};

replace <YOUR_SITE_URL> with the URL of the website. 

How to generate a sitemap (SEO) for Next.js project

3. Generate the sitemap: Open your package.json file and locate the scripts section. Add the following line to the scripts section:

        
"scripts" : {
	"build": "next build",
    "export": "next export",
    "generate-sitemap": "next-sitemap"
}

This script will generate the sitemap using the next-sitemap package. As my ideas, you no need to add this one, you can copy the file to public folder, public/sistemap.xml

4. Run the sitemap generation script: In your terminal, run the following command to generate the sitemap:

npm run generate-sitemap

This command will generate the sitemap XML file in the root directory of your Next.js project,

5. Configure deployment: if you deploying your Next.js project to a hosting platform, you may need to configure your deployment process to include the sitemap XML file in the deployed build.

6. Automate sitemap generation: Of you want to automate the sitemap generation process, you can add the npm run generate-sitemap command to your build or deployment workflow

By following these steps, you can generate a sitemap for your Next.js project using the next-sitemap package. 

Thank you for reading this post. I hope you found it helpful and easy to follow. If you have any feedback or questions about , please share them in the comments below. I would love to hear from you and discuss this topic further

✋✋✋✋  Webzone Tech Tips, all things Tech Tips for web development  - I am Zidane, See you next time soon ✋✋✋✋