DEV Community

Endrit Gashi
Endrit Gashi

Posted on

How to Implement a Sitemap in Next.js for Better SEO

Next.js is a popular React-based framework for building server-side rendered (SSR) and statically generated websites. One important aspect of optimizing a website for search engines is to have a well-structured sitemap. In this blog post, we'll go over how to implement a sitemap in Next.js for better SEO.

What is a Sitemap?
A sitemap is a file that lists all the pages of your website. It is submitted to search engines such as Google and Bing to help them crawl and index your site more efficiently. A sitemap also provides important information about each page, such as when it was last updated and how often it changes.

Implementing a Sitemap in Next.js
There are several packages available for generating sitemaps in Next.js, but we'll be using the next-sitemap package. Here's how to set it up:

  • Install the package
npm install next-sitemap

Enter fullscreen mode Exit fullscreen mode
  • Create a sitemap.js file in your Next.js project's root directory.
import Sitemap from 'next-sitemap';

export default new Sitemap()
    .add({ url: '/', changefreq: 'daily', priority: 1.0 })
    .build('https://www.example.com');


Enter fullscreen mode Exit fullscreen mode
  • Add a script to generate the sitemap.xml file in your package.json file.
"scripts": {
  "generate-sitemap": "node sitemap.js"
}

Enter fullscreen mode Exit fullscreen mode
  • Run the script to generate the sitemap.xml file.
npm run generate-sitemap

Enter fullscreen mode Exit fullscreen mode
  • Submit the sitemap.xml file to search engines. You can do this through Google Search Console and Bing Webmaster Tools.

Top comments (0)