Sitemap.xml generation in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js API response type.

NextJS

import type { [1] } from 'next';

Drag options to blanks, or click blank then click option'

ANextApiResponse

BNextConfig

CNextApiRequest

DNextPage

Attempts:

3 left

💡 Hint

Common Mistakes

Importing NextApiRequest instead of NextApiResponse

Using NextPage which is for pages, not API routes

The NextApiResponse type is used to type the response object in API routes, including sitemap generation.

2fill in blank

medium

Complete the code to set the response header for XML content.

NextJS

res.setHeader('Content-Type', '[1]');

Drag options to blanks, or click blank then click option'

Atext/html

Bapplication/json

Capplication/xml

Dtext/plain

Attempts:

3 left

💡 Hint

Common Mistakes

Using application/json which is for JSON data

Using text/html which is for web pages

Sitemap files are XML files, so the content type must be application/xml to tell browsers and crawlers the correct format.

3fill in blank

hard

Fix the error in the sitemap XML string by completing the XML declaration.

NextJS

const sitemap = `<?xml version=[1] encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- URLs here -->
</urlset>`;

Drag options to blanks, or click blank then click option'

A1.0

B"1.1"

C'1.0'

D"1.0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes instead of double quotes

Omitting quotes around the version number

The XML declaration version must be "1.0" with double quotes for correct XML syntax.

4fill in blank

hard

Fill both blanks to generate URLs dynamically in the sitemap XML.

NextJS

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

Drag options to blanks, or click blank then click option'

Apages

Bpath

Curl

Droutes

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' instead of 'path' for the property

Using 'routes' instead of 'pages' for the array

The sitemap is generated by mapping over the pages array and using the path property of each page for the URL location.

5fill in blank

hard

Fill all three blanks to complete the API route that returns the sitemap XML response.

NextJS

export default function handler(req, res: [1]) {
  const pages = [
    { [2]: 'https://example.com/' },
    { [2]: 'https://example.com/about' }
  ];
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${pages.map(page => `
      <url>
        <loc>${page.[3]</loc>
      </url>
    `).join('')}
  </urlset>`;
  res.setHeader('Content-Type', 'application/xml');
  res.status(200).send(sitemap);
}

Drag options to blanks, or click blank then click option'

ANextApiResponse

Bpath

DNextApiRequest

Attempts:

3 left

💡 Hint

Common Mistakes

Typing the response as NextApiRequest instead of NextApiResponse

Using inconsistent property names for URLs

The handler function types the response as NextApiResponse. The pages array uses the path property for URLs, which is also used inside the sitemap XML.

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