Sitemap.xml generation in NextJS - Step-by-Step Execution

Concept Flow - Sitemap.xml generation

Start Request for sitemap.xml

↓

Next.js API Route or Server Component

↓

Fetch or Define URLs to include

↓

Generate XML string with URLs

↓

Set Response Headers (Content-Type: application/xml)

↓

Send XML Response

↓

Browser or Crawler receives sitemap.xml

The flow starts with a request for sitemap.xml, Next.js code generates XML with URLs, sets headers, and sends it back.

Execution Sample

NextJS

export async function GET() {
  const urls = ['/', '/about', '/contact'];
  const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n${urls.map(url => `<url><loc>https://example.com${url}</loc></url>`).join('')}\n</urlset>`;
  return new Response(xml, { headers: { 'Content-Type': 'application/xml' } });
}

This Next.js server function generates a sitemap.xml with three URLs and returns it with the correct XML content type.

Execution Table

Step	Action	Data/Variable	Result
1	Function GET called	No input	Start sitemap generation
2	Define URLs array	urls = ['/', '/about', '/contact']	URLs ready for XML
3	Map URLs to XML <url> tags	urls.map(...)	<url><loc>https://example.com/</loc></url> etc.
4	Create full XML string	xml = '<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">...</urlset>'	Complete sitemap XML
5	Return Response with XML and header	Response(xml, headers)	Sends sitemap.xml with content-type application/xml
6	Browser or crawler receives response	Response with XML	Sitemap.xml loaded successfully
7	End	No further action	Process complete

💡 All URLs processed and XML response sent, sitemap.xml generation complete

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
urls	undefined	['/', '/about', '/contact']	Same	Same	Same
xml	undefined	undefined	Partial XML string from map	Full XML string with header and urlset	Full XML string ready to send

Key Moments - 3 Insights

Why do we set the Content-Type header to 'application/xml'?

Because the browser or crawler needs to know the response is XML, not HTML or JSON. See execution_table step 5 where the header is set.

What happens if we forget to include all URLs in the XML string?

The sitemap will be incomplete and crawlers might miss pages. Step 3 and 4 show how URLs are mapped and included in the XML string.

Why do we use a server function (GET) instead of a client component?

Because sitemap.xml must be served as a static or server-generated file, not rendered on the client. Step 1 shows the server function handling the request.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'urls' after Step 2?

A ['/', '/about', '/contact']

B undefined

C Complete XML string

D Response object

💡 Hint

Check variable_tracker row for 'urls' after Step 2

At which step is the Content-Type header set to 'application/xml'?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

See execution_table step 5 description about headers

If we add a new URL '/blog' to the urls array, what changes in the execution_table?

A No change, sitemap.xml stays the same

B Step 2 urls array includes '/blog', Step 3 maps it to XML

C Step 5 header changes to 'text/html'

D Step 4 XML string is removed

💡 Hint

Adding URLs affects steps 2 and 3 where URLs are defined and mapped

Concept Snapshot

Sitemap.xml generation in Next.js:
- Use a server function (GET) to handle sitemap.xml requests
- Define URLs array to include in sitemap
- Map URLs to XML <url> tags inside <urlset>
- Return XML string with header 'Content-Type: application/xml'
- This serves sitemap.xml dynamically for crawlers

Full Transcript

This visual execution trace shows how to generate sitemap.xml in Next.js. When a request comes for sitemap.xml, the server function GET runs. It defines an array of URLs to include. Then it maps each URL to an XML <url> tag and wraps all in a <urlset> tag with XML header. The function returns this XML string as a Response with the content-type set to application/xml. The browser or crawler receives this XML sitemap. Variables like 'urls' and 'xml' change step by step as the code runs. Key moments include why the content-type header is needed and why this runs on the server. The quizzes test understanding of variable values and steps where headers are set or URLs added.