I am trying to create dynamic sitemaps for my next-js site with next-sitemap but I'm running into an issue.
I have followed the docs and created the following
//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 above code produces(as expected)
{
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, http://localhost:3000/server-sitemap-index.xml
produces:
<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 populated properly. I am using javascript, not typescript like the examples in the docs. Could this really be the issue?
Ps: All the other sitemaps(not dynamic) come out okay.
Okay, so I found the problem.
I needed to import the correct module, next-sitemap
has two APIs.
import { getServerSideSitemapIndex ,getServerSideSitemap } from "next-sitemap";
You need getServerSideSitemap
.