Published on

How to generate nextjs sitemap for your project

How to generate nextjs sitemap for your project
Authors

Creating a sitemap for your nextjs project can be a daunting task. But with the right tools, it's easy to create a custom sitemap that is both efficient and effective. Here's a quick guide on how to create a sitemap for your nextjs project.

What is a sitemap?

A sitemap is a file that contains information about your site's pages, videos, and other assets, as well as the relationships between them. Search engines like Google read sitemap to crawl your site more efficiently. A sitemap tells Google which pages and files on your site you believe are significant. For example, sitemap documents the latest update date of pages, and if there are any different language versions of the page.

What are the disadvantages?

Using a sitemap effectively involves more work, as you have to create a proper, structured one. You can use a link-reduction service like Yoast SEO to generate your sitemap for you, but then you have to maintain and update it on a regular basis. There are also some SEO risks involved, like modifying page elements within your sitemap without taking out any pages. It's worth keeping in mind that with a well-organized sitemap, Googlebot will still index your site even without a title tag, category tags, internal links, image alt tags, article text, meta descriptions, or other HTML tags.

Generating nextjs sitemap

We generate nextjs sitemap with next-sitemap npm package: https://www.npmjs.com/package/next-sitemap.

To run the process, you need a nextjs application. To install next-sitemap, you can run: yarn add next-sitemap.

Next in the config file which is next-sitemap.config.js you include the website url and options such as whthere to generate robots.txt:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: "https://example.com",
  generateRobotsTxt: true,
};

Further adding postbuild script to package.json will automatically generate sitemap on the server hosted by vercel.

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

Web Badminton

Web Badminton is a decentralized badminton centered dapp on IPFS and Polygon Blockchain.

The application utilises JavaScript, NextJS, React, Tailwind Css and Wagmi library, IPFS, nft.storage and web3.storage.

The smart contract is built with solidity, hardhat and polygon blockchain mumbai testnet.

Web Badminton GitHub

Web Badminton Demo