How to dynamically generate a sitemap that is valid and can be submitted in Google Search Console?

Question

I'm generating a sitemap dynamically by using a sitemap.ts file at the root of my app folder. But 2 weird things are happening once my web app is deployed:

• When accessing the sitemap through a browser the sitemap does not look like a sitemap, but still, I do not get any kind of error
• Google is not able to retrieve the sitemap when I manually submit it using the Google Search Console

This is how my sitemap.ts file looks like:

import { MetadataRoute } from 'next';

import { availableLocales } from '../constants/locales';
import { getAllProductIds, getProductCategories } from '../clients/axiosClient';

type NonUrlSitemap = Array<
  Omit<MetadataRoute.Sitemap[number], 'url'> & { resourceName: string }
>;

const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
  const baseUrl = process.env.NEXT_PUBLIC_COGNITO_REDIRECT_SIGN_IN_URL;
  const languageCodes = [
    ...new Set(availableLocales.map((locale) => locale.split('-')[0])),
  ];

  const nonUrlRootSitemap: NonUrlSitemap = [
    {
      resourceName: '',
      lastModified: new Date().toISOString(),
      changeFrequency: 'monthly',
      priority: 0.9,
    },
  ];

  const rootSitemap: MetadataRoute.Sitemap = nonUrlRootSitemap.map(
    ({ resourceName, ...rest }) => {
      return {
        ...rest,
        url: `${baseUrl}/${resourceName}`,
        alternates: {
          languages: languageCodes.reduce((acc, currentLocale) => {
            return {
              ...acc,
              [currentLocale]: `${baseUrl}/${currentLocale}/${resourceName}`,
            };
          }, {}),
        },
      };
    }
  );

  const categoryAndSubcategoryPairs = (
    await getProductCategories('en')
  ).flatMap((category) => {
    return category.subcategories.map((subcategory) => {
      return {
        categoryId: category.id,
        subcategoryId: subcategory.id,
      };
    });
  });
  const categoriesSitemap: MetadataRoute.Sitemap =
    categoryAndSubcategoryPairs.map(({ categoryId, subcategoryId }) => {
      return {
        url: `${baseUrl}/products?categoryId=${categoryId}&amp;subcategoryId=${subcategoryId}`,
        lastModified: new Date().toISOString(),
        changeFrequency: 'monthly',
        priority: 0.5,
        alternates: {
          languages: languageCodes.reduce((acc, currentLocale) => {
            return {
              ...acc,
              [currentLocale]: `${baseUrl}/${currentLocale}/products?categoryId=${categoryId}&amp;subcategoryId=${subcategoryId}`,
            };
          }, {}),
        },
      };
    });

  const productIds = await getAllProductIds();
  const productsSitemap: MetadataRoute.Sitemap = productIds.map((productId) => {
    return {
      url: `${baseUrl}/products/${productId}`,
      lastModified: new Date().toISOString(),
      changeFrequency: 'monthly',
      priority: 0.8,
      alternates: {
        languages: languageCodes.reduce((acc, currentLocale) => {
          return {
            ...acc,
            [currentLocale]: `${baseUrl}/${currentLocale}/products/${productId}`,
          };
        }, {}),
      },
    };
  });

  return [...rootSitemap, ...categoriesSitemap, ...productsSitemap];
};

export default sitemap;

Now, keep in mind that when building the project, I do not get any errors on the sitemap.

This is how the sitemap looks like when I request it using a browser:

From what I now this is how it must look like:

When trying to manually submit the sitemap using the console I get this:

Sitemap could not be read General HTTP error 1 instance We encountered an error while trying to access your sitemap. Please ensure that your sitemap is present at the specified address and is not blocked to Google. See our help center for more debugging help. HTTP Error: 500

And when I test the live url using the Google Search Console I get this:

Page cannot be indexed: Server error (5xx) URL will be indexed only if certain conditions are met Discovery Not checked in live tests Crawl Time Sep 18, 2024, 7:46:41 AM Crawled as Google Inspection Tool smartphone Crawl allowed? Yes Page fetch error Failed: Server error (5xx) Indexing allowed? N/A Indexing User-declared canonical N/A Google-selected canonical Only determined after indexing

PD: When I test the live url of any other page of my app I do not get any kind of error, it says that the fetch status is succesful.

Thank you in advance! Any help is appreciated!