next-sitemap server-sided dynamic sitemaps Nextjs

Hey we are looking for any guidance on how to use the sitemapSize prop or if theres any possible solution we can use to achieve this, assuming it is only used and available during the build time, in our application we are using getServerSideProps to fetch our dynamic data/posts that will eventually have a potential of millions of posts at run time for SEO purposes and looking for any scalable techniques.

Heres what we got going so far

server-sitemap.xml

  import { getServerSideSitemapIndex } from "next-sitemap";

  export const getServerSideProps = async (ctx) => {
    // Method to source urls from cms
    // const urls = await fetch('https//example.com/api')

    const siteUrl = process.env.NEXT_PUBLIC_DOMAIN_PUBLIC_WEB_URL;
    return getServerSideSitemapIndex(ctx, [
      `${siteUrl}/sitemap.xml`,
      `${siteUrl}/posts-sitemap.xml`,
      `${siteUrl}/users-sitemap.xml`,
    ]);
  };

  // Default export to prevent next.js errors
  export default function SitemapIndex() {}

/* eslint-disable no-return-await */
import { AmplifyConfigure } from "utility/amplify";
import graphqlClient from "graphql/apollo-client";
import { GetPostIds } from "graphql/queries";
import { getServerSideSitemap } from "next-sitemap";

export default function Sitemap() {
  return null;
}

// function generateSiteMap(posts) {
//   return `<?xml version="1.0" encoding="UTF-8"?>
//    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
//      ${posts
//        .map(
//          ({ id }) => `
//        <url>
//            <loc>${`${process.env.NEXT_PUBLIC_DOMAIN_PUBLIC_WEB_URL}/post/${id}`}</loc>
//            <lastmod>${`${new Date().toISOString()}`}</lastmod>
//        </url>
//      `
//        )
//        .join("")}
//    </urlset>
//  `;
// }

export async function getServerSideProps(ctx) {
  AmplifyConfigure();
  const client = graphqlClient;

  const getPostIds = async ({ cursors }) =>
    await client.query({
      query: GetPostIds,
      variables: {
        cursors,
      },
    });

  const [
    posts1,
    posts2,
    posts3,
    posts4,
    posts5,
    posts6,
    posts7,
    posts8,
    posts9,
    posts10,
    posts11,
    posts12,
    posts13,
  ] = await Promise.all([
    getPostIds({ cursors: { offset: 0, limit: 400 } }),
    getPostIds({ cursors: { offset: 401, limit: 400 } }),
    getPostIds({ cursors: { offset: 801, limit: 400 } }),
    getPostIds({ cursors: { offset: 1201, limit: 400 } }),
    getPostIds({ cursors: { offset: 1601, limit: 400 } }),
    getPostIds({ cursors: { offset: 2001, limit: 400 } }),
    getPostIds({ cursors: { offset: 2401, limit: 400 } }),
    getPostIds({ cursors: { offset: 2801, limit: 400 } }),
    getPostIds({ cursors: { offset: 3201, limit: 400 } }),
    getPostIds({ cursors: { offset: 3601, limit: 400 } }),
    getPostIds({ cursors: { offset: 4001, limit: 400 } }),
    getPostIds({ cursors: { offset: 4401, limit: 400 } }),
    getPostIds({ cursors: { offset: 4801, limit: 400 } }),
  ]);

  const fields = [
    ...posts1.data.getPostIds.posts,
    ...posts2.data.getPostIds.posts,
    ...posts3.data.getPostIds.posts,
    ...posts4.data.getPostIds.posts,
    ...posts5.data.getPostIds.posts,
    ...posts6.data.getPostIds.posts,
    ...posts7.data.getPostIds.posts,
    ...posts8.data.getPostIds.posts,
    ...posts9.data.getPostIds.posts,
    ...posts10.data.getPostIds.posts,
    ...posts11.data.getPostIds.posts,
    ...posts12.data.getPostIds.posts,
    ...posts13.data.getPostIds.posts,
  ];

  const siteMap = fields.map((post) => ({
    loc: `https://www.example.com/post/${post.id}`,
    lastmod: new Date().toISOString(),
  }));

  return getServerSideSitemap(ctx, siteMap);
}

We are looking to fetch 50k posts per sitemap in the first posts-sitemap.xml folder, with some how knowing that first sitemap has 50k posts and we need to generate another sitemap say posts-sitemap-2.xml the problem is this folder isnt technically a sitemap file, its just a javascript file thats fetching posts on the server and just rendering XML in the component, but for SEO purposes these posts need to be fetched at run time/ on the server.

Would greatly appreciate any suggestions we can try to stray away from having to manually create posts-sitemap-2.xml, posts-sitemap-3.xml, posts-sitemap-4.xml which just holds their own index.js that would fetch the correct posts(posts-sitemap-1.xml holding 0-50k, posts-sitemap-2.xml holding 50k-100k etc...)

Looks like the only thing getServerSideSitemap does is return XML from the server using res.write from the context prop you have access with next which we can do manually in the commented code block.

The main problem is essentially you would need to serve a new folder which each holds a index.js with its correct posts data which is a very confusing thought.

Any pointers are greatly appreciated.

Thanks!