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 })

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)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.