🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Handling sitemaps for Next.js apps with dynamic pages from Sanity

4 replies
Last updated: Dec 6, 2021
Not so much a "getting started" question, but I am curious how others are handling a sitemap for their Next.js application with dynamic pages from Sanity. I am currently using
next-sitemap
but to pick any new pages up a new release of my app would have to be released. However, there is this snippet from
next-sitemap
for creating dynamic/server-side sitemaps... I just feel it is weird to have 2 sitemaps with duplicate content is just _odd_/wrong.
Dec 4, 2021, 12:28 AM
Hi
user P
, I’ve been creating my sitemaps using a
sitemap.xml.jsx
file in my pages directory. You could add your static pages here too.

import { allSlugsQuery } from '@/data/queries';
import { sanityClient } from '@/lib/sanity.server';

const SiteMap = function () {
	return <div>loading</div>;
};

export async function getServerSideProps({ res }) {
	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL;
	const urls = await sanityClient.fetch(allSlugsQuery);
	const slugs = urls.map(
		(page) =>
			`
      <loc>${baseUrl}${page.replace('/', '')}</loc>
      <changefreq>daily</changefreq>
      <priority>0.7</priority>
    `
	);

	const locations = [...slugs];
	const createSitemap = () => `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
        ${locations.map((location) => `<url> ${location}</url>`).join('')}
    </urlset>
    `;
	res.setHeader('Content-Type', 'text/xml');
	res.write(createSitemap());
	res.end();
	return {
		props: {},
	};
}

export default SiteMap; 
and a groq query that pulls all my slugs


// GROQ All Slugs
export const allSlugsQuery = `
  *[defined(slug.current)][].slug.current
`;
I’ve set my site up using a blog post from
user T
that uses Next catch all routes and slugs: https://www.simeongriggs.dev/nextjs-sanity-slug-patterns
I hope this helps!
Dec 5, 2021, 10:06 PM
The only thing this doesn't account for in my scenario is having
/authors/[slug]
but also
/[slug]
Dec 6, 2021, 4:27 AM
I was running into the same issues when trying figure out my sitemap for Sanity projects.
With help from the the article linked above, I use 1 catch all route for all pages. The articles discusses strategies to define different slug patterns and applying different layouts layouts.

That above sitemap is from this site
https://www.sisucon.com.au/sitemap.xml and it outputs my
/careers/
pages well.
Dec 6, 2021, 4:55 AM
I usually create an api/sitemap function that generates the sitemap xml and then have a redirect called sitemap.xml to that function in next.config.js. No dependencies or build step, it's cacheable and customisable.
{ source: '/sitemap.xml', destination: '/api/sitemap' },
I use a catch all route as well, but not 'hard stored' like in the article above. I use a flexible parent based relation (references) for Sanity documents and have a groq sitemap query as the source of truth to resolve all routes. This query is used for the sitemap, next static paths, internal links and a visual sitemap inside sanity.

Routes are really key to your web app, best to have them set up right from the get go rather than as an afterthought.
Dec 6, 2021, 7:31 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?