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.