Sitemap.xml generation in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js sitemap generation code output?

Consider this Next.js server component that generates a sitemap.xml response. What is the output when visiting the sitemap route?

NextJS

import { NextResponse } from 'next/server';

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

A A JSON response with the sitemap data as an object

B An XML sitemap with one URL entry for https://example.com/, served with Content-Type application/xml

C A plain text response showing the sitemap XML as a string but with Content-Type text/plain

D A runtime error because NextResponse cannot be used in server components

💡 Hint

Think about what NextResponse does and the Content-Type header for XML.

The code returns a NextResponse with the sitemap XML string and sets the Content-Type header to application/xml. This means the browser or crawler receives a proper XML sitemap.

Option B is wrong because the response is not JSON. Option B is wrong because the Content-Type is correctly set to application/xml, not text/plain. Option B is wrong because NextResponse is valid in Next.js server components for custom responses.

📝 Syntax

intermediate

Which option correctly generates a sitemap.xml in Next.js using server actions?

You want to create a sitemap.xml route in Next.js 14+ using server actions. Which code snippet correctly returns the sitemap XML with proper headers?

A

export async function GET() {
  return new Response('<urlset></urlset>', { headers: { 'Content-Type': 'application/xml' } });
}

B

export function GET() {
  return '<urlset></urlset>';
}

C

export async function GET() {
  return Response('<urlset></urlset>');
}

D

export async function GET() {
  return new NextResponse('<urlset></urlset>');
}

💡 Hint

Remember to use the Response constructor and set headers explicitly.

Option A correctly uses the standard Response constructor with the XML string and sets the Content-Type header to application/xml.

Option A returns a string without headers, so the content type defaults to text/html, which is incorrect for sitemap.xml.

Option A calls Response as a function without new, causing a runtime error.

Option A uses NextResponse without importing it, and NextResponse is not always necessary; also, it lacks headers.

🔧 Debug

advanced

Why does this sitemap.xml route return a 404 error in Next.js?

Given this Next.js route file named sitemap.xml.js inside app directory, why does visiting /sitemap.xml return 404? ```js export async function GET() { const xml = ``; return new Response(xml, { headers: { 'Content-Type': 'application/xml' } }); } ```

A The Response constructor is not imported from 'next/server'

B The GET function is missing the export default keyword

C The file name sitemap.xml.js is invalid; Next.js expects route files without dots except for extensions

D The XML string is malformed and causes a runtime error

💡 Hint

Check Next.js routing conventions for file names in the app directory.

Next.js app router does not support dots in route file names except for the extension. Naming a file sitemap.xml.js creates an invalid route, causing 404.

Option C is wrong because GET is a named export, which is correct. Option C is wrong because Response is a global in Next.js runtime, no import needed. Option C is wrong because the XML string is valid.

❓ state_output

advanced

What is the output of this dynamic sitemap generation code in Next.js?

This Next.js server component generates sitemap XML dynamically from a list of pages. What is the output?

NextJS

import { NextResponse } from 'next/server';

const pages = ['/', '/about', '/contact'];

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

A A runtime error because pages is not awaited

B A JSON array of URLs as the response body

C An empty sitemap with no URLs inside <urlset>

D

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://example.com/</loc></url>
  <url><loc>https://example.com/about</loc></url>
  <url><loc>https://example.com/contact</loc></url>
</urlset>

💡 Hint

Look at how pages are mapped to XML strings and joined.

The code maps each page path to a <url> XML element with the full URL, joins them with newlines, and wraps them in <urlset> tags with XML declaration. The response is served with application/xml content type.

Option D is wrong because the response is XML, not JSON. Option D is wrong because pages array is not empty. Option D is wrong because pages is a synchronous array, no await needed.

🧠 Conceptual

expert

Why is using a server component with NextResponse preferred for sitemap.xml in Next.js 14+?

Select the best reason why generating sitemap.xml using a Next.js server component with NextResponse is recommended over static files or client components.

A It allows dynamic generation of sitemap content on each request with correct headers, improving SEO and freshness.

B It enables client-side rendering of sitemap.xml for faster user interaction.

C It forces the sitemap to be cached indefinitely, reducing server load but risking stale data.

D It automatically minifies the sitemap XML without extra configuration.

💡 Hint

Think about SEO needs and how server components handle responses.

Using a server component with NextResponse lets you generate sitemap.xml dynamically on the server with proper XML content and headers. This ensures search engines get fresh, accurate sitemaps improving SEO.

Option A is wrong because indefinite caching is not automatic and can cause stale data. Option A is wrong because sitemap.xml should not be client-rendered; it must be server-generated. Option A is wrong because minification is not automatic.

Practice

1. What is the main purpose of generating a sitemap.xml in a Next.js application?

easy

A. To help search engines find and index your pages faster

B. To improve the visual design of your website

C. To add client-side routing capabilities

D. To store user session data securely

Solution

1. Step 1: Understand sitemap.xml role

   A sitemap.xml file lists URLs of your website to guide search engines.

2. Step 2: Connect sitemap.xml to Next.js usage

   In Next.js, sitemap.xml helps search engines find pages faster by providing URL info.

3. Final Answer:

   To help search engines find and index your pages faster -> Option A

4. Quick Check:

   Sitemap.xml purpose = Help search engines [OK]

Hint: Remember sitemap.xml is for search engines, not UI [OK]

Common Mistakes:

• Confusing sitemap.xml with styling or UI files
• Thinking sitemap.xml stores user data
• Assuming sitemap.xml adds client-side routing

2. Which of the following is the correct way to set the response header for a sitemap.xml in a Next.js API route?

easy

A. res.setHeader('Content-Type', 'text/html')

B. res.setHeader('Content-Type', 'text/plain')

C. res.setHeader('Content-Type', 'application/json')

D. res.setHeader('Content-Type', 'application/xml')

Solution

1. Step 1: Identify correct content type for sitemap.xml

   Sitemap.xml is an XML file, so the content type must be 'application/xml'.

2. Step 2: Match header setting in Next.js API route

   Use res.setHeader('Content-Type', 'application/xml') to set correct header.

3. Final Answer:

   res.setHeader('Content-Type', 'application/xml') -> Option D

4. Quick Check:

   Content-Type for sitemap.xml = application/xml [OK]

Hint: Always use 'application/xml' for sitemap responses [OK]

Common Mistakes:

• Using 'text/html' instead of 'application/xml'
• Setting content type to 'application/json'
• Forgetting to set content type header

3. Given this Next.js API route code snippet for sitemap.xml generation, what will be the output content type header?

export async function GET(req, res) {
  res.setHeader('Content-Type', 'application/xml');
  return new Response(`<urlset></urlset>`);
}

medium

A. 'application/json'

B. 'text/html'

C. No content type header set

D. 'application/xml'

Solution

1. Step 1: Understand Next.js 13+ GET handler response

   In Next.js 13+, the GET function returns a Response object; setting headers on 'res' does not affect it.

2. Step 2: Check if content type header is set on Response

   The Response constructor here lacks headers, so no content type header is sent.

3. Final Answer:

   No content type header set -> Option C

4. Quick Check:

   Setting header on 'res' ignored, Response lacks headers [OK]

Hint: Set headers inside Response, not on 'res' in Next.js GET [OK]

Common Mistakes:

• Assuming res.setHeader affects Response output
• Not adding headers inside Response constructor
• Confusing old API routes with new app router

4. Identify the bug in this Next.js sitemap.xml route code and how to fix it:

export async function GET() {
  const sitemap = `<urlset><url><loc>/home</loc></url></urlset>`;
  return new Response(sitemap);
}

medium

A. Missing 'Content-Type' header; add it in Response headers

B. Incorrect XML tags; use <html> instead of <urlset>

C. Function must be named 'getSitemap' instead of 'GET'

D. Response must return JSON, not XML string

Solution

1. Step 1: Check response headers for sitemap.xml

   The code returns XML string but does not set 'Content-Type' header to 'application/xml'.

2. Step 2: Fix by adding headers in Response constructor

   Add { headers: { 'Content-Type': 'application/xml' } } to Response to fix the bug.

3. Final Answer:

   Missing 'Content-Type' header; add it in Response headers -> Option A

4. Quick Check:

   Set 'Content-Type' header for XML response [OK]

Hint: Always add 'Content-Type' header when returning XML [OK]

Common Mistakes:

• Forgetting to set content type header
• Using wrong XML tags for sitemap
• Misnaming the GET function

5. You want to generate a dynamic sitemap.xml in Next.js that includes URLs from a database. Which approach correctly combines fetching data and returning a valid sitemap response?

hard

A. Fetch URLs, return JSON array directly without headers

B. Fetch URLs, build XML string, then return new Response with XML and 'application/xml' header

C. Fetch URLs, set res.setHeader('Content-Type', 'application/json'), return JSON string

D. Fetch URLs, build XML string, return plain string without Response object

Solution

1. Step 1: Fetch URLs from database asynchronously

   Use async function to get URLs from database or API.

2. Step 2: Build XML string with URLs and return Response with correct header

   Create XML sitemap string, then return new Response(xmlString, { headers: { 'Content-Type': 'application/xml' } }).

3. Final Answer:

   Fetch URLs, build XML string, then return new Response with XML and 'application/xml' header -> Option B

4. Quick Check:

   Dynamic sitemap = fetch + XML + Response with header [OK]

Hint: Build XML string and return Response with XML header [OK]

Common Mistakes:

• Returning JSON instead of XML for sitemap
• Not setting content type header
• Returning plain string without Response object