Next.js 9.4+ Sitemap on Serverless or SSR projects

next.config.js

// ...etc.

// ------------------------------------------------------------
// For sitemap stuff

const globby = require('globby');
const globalUtilities = require('./src/utils/globalUtil');

const excludePagePattern = [
  // NOTE: add your custom routes that must not visible on sitemap
  '!pages/task-success.tsx',
];
const includeManualPageURLs = [
  // NOTE: add your custom routes that is SSR/SSG but not possible to catch automatically
  'tasks/shopping',
  'tasks/todo',
];
const staticPageListPattern = [
  'pages/**/*{.ts,.tsx}',
  '!pages/_*{.ts,.tsx}',
  '!pages/**/[*{.ts,.tsx}',
  '!pages/api',
  '!pages/sitemap.xml.tsx',
  ...excludePagePattern,
];

const pageList = globby.sync(staticPageListPattern);
const pages = globalUtilities.preparePagesForSitemap([
  ...pageList,
  ...includeManualPageURLs.map((item) => `/${item}`),
]);

// For sitemap stuff -- end
// ------------------------------------------------------------

// ...etc.

pages-sitemap.xml.jsx

import { GetServerSideProps, NextPage } from 'next';
import React from 'react';
import getConfig from 'next/config';
// NOTE: don't forget to move prettier to dependencies to use it on production
import prettier from 'prettier';
import { getAllTasks } from '@utils/apiCalls';
import { getUrlFromTask } from '@utils/.';
import ITaskItem from '@interfaces/taskItem';

const Page: NextPage = () => {
  return <></>;
};

const WEBSITE_URL = 'https://helloworld.com';

const createSitemapForStatics = (pages: string[]) => {
  const sitemap = `
            ${pages
              .map((route) => {
                return `
                        <url>
                            <loc>${`${WEBSITE_URL}${route}`}</loc>
                        </url>
                    `;
              })
              .join('')}
    `;

  return sitemap;
};

const createSitemapWithDynamic = (
  staticPages: string,
  data: ITaskItem[],
) => `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${staticPages}
        ${data
          .map((item) => {
            return `
                    <url>
                        <loc>${`${WEBSITE_URL}${getTaskUrl(item)}`}</loc>
                    </url>
                `;
          })
          .join('')}
    </urlset>
    `;

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const {
    serverRuntimeConfig: { publicStaticPageList },
  } = getConfig();
  const data = await getAllTasks();

  const staticPages =
    publicStaticPageList && Object.keys(publicStaticPageList).length !== 0
      ? createSitemapForStatics(publicStaticPageList)
      : '';

  let siteMap = createSitemapWithDynamic(staticPages, data);

  // NOTE: if you don't want to use prettier, remove here, next line and importer
  const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
  siteMap = prettier.format(siteMap, {
    ...prettierConfig,
    parser: 'html',
  });

  res.setHeader('Content-Type', 'text/xml');
  res.write(siteMap);
  res.end();

  return {};
};

export default Page;