Creating dynamic sitemaps for my Next.js site using next-sitemap has hit a snag.
Following the documentation, I've implemented the following code:
//pages/server-sitemap-index.xml/index.js
import axios from "axios";
import { getServerSideSitemapIndex } from "next-sitemap";
export const getServerSideProps = async (ctx) => {
const res = await axios(`${process.env.API_ROOT}/books`);
const { data } = res.data;
const fields = data.map((item) => ({
loc: `${process.env.NEXTAUTH_URL}/${item.slug}`,
lastmod: item.updatedAt,
priority: 0.7,
changefreq: "daily",
}));
console.log({ fields });
return getServerSideSitemapIndex(ctx, fields);
};
export default function SitemapIndex() {}
The console.log in the code above produces the expected output:
{
fields: [
{
loc: 'http://localhost:3000/The-river-between-3pgkgy',
lastmod: '2022-03-16T16:02:06.000Z',
priority: 0.7,
changefreq: 'daily'
},
{
loc: 'http://localhost:3000/The-river-between-0tqwkgy',
lastmod: '2022-03-16T16:02:06.000Z',
priority: 0.7,
changefreq: 'daily'
},
{
loc: 'http://localhost:3000/The-river-between-tqwkgy',
lastmod: '2022-03-16T16:02:06.000Z',
priority: 0.7,
changefreq: 'daily'
}
]
}
However, when accessing
http://localhost:3000/server-sitemap-index.xml<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>[object Object]</loc>
</sitemap>
<sitemap>
<loc>[object Object]</loc>
</sitemap>
<sitemap>
<loc>[object Object]</loc>
</sitemap>
</sitemapindex>
The XML is not populating correctly. Could this be due to using JavaScript instead of TypeScript as shown in the documentation? Ps: Non-dynamic sitemaps are functioning as expected.