How to Create Sitemap in Next.js for SEO Optimization

To create a sitemap in Next.js, generate an XML sitemap file dynamically using getServerSideProps or an API route that outputs XML content. Then, serve this sitemap at /sitemap.xml so search engines can easily find and crawl your site pages.

Syntax

Use an API route or getServerSideProps to generate and serve the sitemap XML dynamically. The sitemap XML must follow the standard sitemap protocol with <urlset> and <url> tags.

Key parts:

• res.setHeader('Content-Type', 'text/xml') to tell the browser this is XML.
• Return the XML string as the response body.
• Include URLs of your pages inside <url> tags with <loc> for the page URL.

javascript

export async function getServerSideProps({ res }) {
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://example.com/</loc>
    </url>
  </urlset>`;

  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();

  return { props: {} };
}

Example

This example shows how to create a sitemap.xml page in Next.js that dynamically generates a sitemap with multiple URLs. It uses getServerSideProps to send XML content directly to the browser.

javascript

export async function getServerSideProps({ res }) {
  const baseUrl = 'https://example.com';
  const pages = ['/', '/about', '/contact'];

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${pages
      .map(
        (page) => `
      <url>
        <loc>${baseUrl}${page}</loc>
      </url>`
      )
      .join('')}
  </urlset>`;

  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();

  return { props: {} };
}

export default function Sitemap() {
  return null; // This page does not render anything client-side
}

Output

When you visit https://example.com/sitemap.xml, the browser shows the XML sitemap with URLs: /, /about, /contact.

Common Pitfalls

• Forgetting to set the Content-Type header to text/xml causes browsers or crawlers to misinterpret the sitemap.
• Not ending the response with res.end() can leave the request hanging.
• Returning JSX or JSON instead of raw XML will break sitemap format.
• Hardcoding URLs without the full domain can cause invalid sitemap entries.

javascript

/* Wrong way: Returning JSX or JSON */
export default function Sitemap() {
  return <div>Not a sitemap</div>;
}

/* Right way: Send raw XML with headers */
export async function getServerSideProps({ res }) {
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://example.com/</loc></url></urlset>`;
  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();
  return { props: {} };
}

Quick Reference

• Use getServerSideProps or API routes to generate sitemap XML dynamically.
• Always set Content-Type header to text/xml.
• Include full URLs with domain in <loc> tags.
• End the response with res.end() to complete the request.
• Serve sitemap at /sitemap.xml for SEO tools to find it easily.

Key Takeaways

Generate sitemap XML dynamically using getServerSideProps or API routes in Next.js.

Set the Content-Type header to text/xml to ensure correct sitemap format.

Include full absolute URLs inside tags in the sitemap XML.

End the response with res.end() to properly send the sitemap content.

Serve the sitemap at /sitemap.xml so search engines can easily find it.