The Benefits of Sitemaps for SEO

1. Improved Crawlability: Sitemaps are even more vital for large websites, as they may have pages that Google's web crawlers could overlook. A sitemap provides a comprehensive guide, ensuring no page is left uncrawled.
2. Better Indexing for Isolated Pages: Sometimes, certain pages on your site may not be well-linked, creating isolated pockets of content. In such cases, a sitemap becomes essential to ensure that these pages are not missed by Google's indexing bots.
3. Promotion of New Sites: New websites often struggle with visibility due to a lack of external links. A sitemap helps search engine bots discover and index all the pages on your site, thus overcoming this hurdle.
4. Enhanced Visibility for Rich Media Content: If your Next.js website features rich media content like videos and images, or is featured in Google News, having a sitemap allows Google to take additional information into account for search, improving the visibility of this content.

The Drawbacks of Sitemaps

1. Not a Guarantee: Submitting a sitemap doesn't guarantee that all pages will be indexed by Google. Numerous other factors, like the quality and relevance of the page content, come into play.
2. Doesn’t Improve Rankings: While a sitemap helps search engines find and index your pages, it doesn't directly enhance your rankings. You still need to focus on content quality and SEO optimisation for high search rankings.

Building a Dynamic Sitemap in Next.js

# Install Globby so we can interface with the files system.
yarn add -D globby

// scripts/generate-sitemap.mjs

import { writeFileSync } from 'fs';
import { globby } from 'globby';

async function generate() {
  const pages = await globby([
    'pages/*.tsx',
    'data/**/*.mdx',
    '!data/*.mdx',
    '!pages/_*.tsx',
    '!pages/api',
    '!pages/404.tsx',
    '!pages/sitemap.xml.tsx',
  ]);

  const formatted = {
    paths: pages
    .map((page) => {
      const path = page
        .replace('pages', '')
        .replace('data', '')
        .replace('.tsx', '')
        .replace('.mdx', '');
      const route = path === '/index' ? '' : path;

      return `https://contic.co.uk${route}`;
    })
  };

  writeFileSync('pages/sitemap.xml/base.json', JSON.stringify(formatted));
}

generate();

"scripts": {
	...
	"prebuild": "node ./scripts/generate-sitemap.mjs"
}

//pages/sitemap.xml/index.tsx

import { NextPageContext } from 'next';
import base from './base.json';

const createSitemap = (
  blogs: string[]
) => {
  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${base.paths
      .map(
        (path) => `
                <url>
                  <loc>${path}</loc>
                </url>
        `
      )
      .join('')}
        ${blogs
          .map((path) => {
            return `
                <url>
                    <loc>${`https://contic.co.uk/blogs/${path}`}</loc>
                </url>
            `;
          })
          .join('')}

    </urlset>
    `;
};

function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

export async function getServerSideProps({ res }: NextPageContext) {
  // Add code here to connect to your third party service and get your additional paths

  res?.setHeader('Content-Type', 'text/xml');
  res?.write(createSitemap(paths?.filter((path) => !!path) ?? []));
  res?.end();
  return {
    props: {},
  };
}

export default SiteMap;

//pages/sitemap.xml/base.json
{ "paths": [] }

User-agent: *
Sitemap: https://contic.co.uk/sitemap.xml