I am currently working on implementing a dynamic sitemap for NextJs 13.4.6, referring to the guide available at .
However, I have encountered an issue with the code provided towards the end of the article which is supposed to generate a sitemap for NextJS versions 13.3 and above, but unfortunately, it does not seem to work as expected.
The code snippet I am using aims to create a sitemap by retrieving URLs based on my website's routes and blog posts retrieved from our CMS via API calls.
interface ApiResponseEntries {
data: TransformedEntry[];
status: number;
}
// The root URL will be updated once in production
const rootUrl = "http://localhost:3000";
export default async function sitemap() {
try {
const url = "/api/routes/contentful/entries";
const response: AxiosResponse<ApiResponseEntries> = await axios.get(url);
const blogPostEntries: TransformedEntry[] = response.data.map(
(entry: TransformedEntry) => {
return entry.contentType === "blogPost";
}
);
const blogPosts = blogPostEntries.map((entry: TransformedEntry) => ({
url: `${URL}/blog/${entry.id}`,
lastModified: entry.updatedAt,
}));
const routes = ["/", "/blog"].map((route) => ({
url: `${URL}${route}`,
lastModified: new Date().toISOString(),
}));
return [...routes, ...blogPosts];
} catch (error) {
console.error("Error", error);
}
}
My concern lies in the fact that even after following the instructions diligently, visiting localhost:3000/sitemap.xml results in a 404 page, indicating that XML formatting has not been defined anywhere in the code.
If anyone has successfully implemented a dynamic sitemap for newer versions of NextJs13 or can provide examples demonstrating how to achieve this, your guidance would be greatly appreciated.
Thank you!