A sitemap is essentially a roadmap for search engines, guiding them through the intricate web of your website. Here’s why it matters:

• Enhances Search Engine Crawling: A well-structured sitemap ensures that search engine bots can easily discover and index your web pages. This means more of your content gets included in search engine results.
• Improved User Experience: Sitemaps are not just for search engines; they also benefit your visitors. Users can navigate your site more efficiently, finding the content they need with ease.
• Boosts SEO Ranking: When search engines can easily crawl and index your pages, it positively impacts your SEO ranking. A sitemap is a must for climbing the search engine results ladder.

Pages Router

In the pages folder, first, create a sitemap.xml.js file, then add a default SiteMap component to it. When the sitemap.xml endpoint is accessed, this component’s primary function is to render the sitemap page. The getServerSideProps function, which will obtain the URLs for each post, call the sitemap rendering function, and publish the response with the text/xml content-type header, will provide the real content.

// pages/sitemap.xml.js
 
const homepage = 'https://www.mdubaid.in';
 
function generateSiteMap() {
    return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <url>
        <loc>${homepage}</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
      <url>
        <loc>${homepage}/abous-us</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
      <url>
        <loc>${homepage}/contact-us</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
    </urlset>
  `;
}
 
export async function getServerSideProps({ res }) {
    const sitemap = generateSiteMap();
 
    res.setHeader('Content-Type', 'text/xml');
    res.write(sitemap);
    res.end();
 
    return {
        props: {},
    };
}
 
export default function SiteMap() {}

App Router

The file-based metadata API was added to Next.js version 13.3 and makes it easier to work with page metadata by exporting a Metadata object. This allows us to develop a sitemap.js file that handles most of the repetitive logic needed to create the sitemap for the website.

Our primary goal in the sitemap.js file is to map posts and static URLs to properties of an object called a Sitemap, then return that object.

// app/sitemap.js
 
const homepage = 'https://www.mdubaid.in.tech';
 
export default async function sitemap() {
    const blogs = await fetch('https://www.postapis.com/posts');
    const data = await blogs.json();
 
    const posts = data.map(post => ({
        url: `${homepage}/blogs/${post.slug}`,
        lastModified: new Date(post.date).toISOString(),
    }));
 
    const routes = ['', '/about-us', '/contact-us'].map(route => ({
        url: `${homepage}${route}`,
        lastModified: new Date().toISOString(),
    }));
 
    return [...routes, ...posts];
}