Generating sitemap

Feature request

My site contains several dynamic routes and uses the getStaticPaths and getStaticProps hooks from the 9.3 release. I’d like to generate a sitemap for it. It’s quite hard.

Describe the solution you’d like

I’d like some way of accessing the list of paths/pages generated during the build step. The information I need is printed to the CLI during “next build” but there’s no way (I think) for the developer to tap into it:

Describe alternatives you’ve considered

There are several other issues on here describing incomplete solutions that only work for static pages. My page has several dynamic routes ([blog.tsx]). I’m not aware of any solution that works.

Additional context

Next.js is 🔥, this is the one thing tripping me up 🤙

[rokinsky]

Solution based on information from the build manifest is not ideal, because pages with getServerSideProps, getInitialProps and getStaticProps with fallback option will not be supported. It is much better to create the sitemap on the fly (the approach was described in discussions multiple times) because only you know your web application better.

Here is my boilerplate from pages/sitemap.xml.jsx:

import { renderToStaticMarkup } from "react-dom/server";

const SitemapIndex = () => null;

const Sitemap = ({ pages, origin }) => {
  /*
   * NOTE: <?xml ?> is optional preamble from the spec,
   *  UTF-8 is the default
   *  version 1.0 is the default
   */
  return (
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      {pages?.map((page, index) => {
        return (
          <url key={index}>
            <loc>{[origin, page?.fullSlug].join("/")}</loc>
            <lastmod>{page?.publishedAt}</lastmod>
          </url>
        );
      })}
    </urlset>
  );
};

export const getServerSideProps = async ({ res }) => {
  const pages = // TODO: fetch your pages
  const origin = // TODO: place your origin

  res.setHeader("Content-Type", "text/xml");
  res.write(renderToStaticMarkup(<Sitemap pages={pages} origin={origin} />));
  res.end();

  return {
    props: {},
  };
};

export default SitemapIndex;

[lachlanjc]

@marcofranssen In your next.config.js:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/sitemap.xml',
        destination: '/api/sitemap',
      },
      // add more here
    ]
  }
}

More on rewrites: https://nextjs.org/docs/api-reference/next.config.js/rewrites