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.