Sitemap.xml generation in NextJS - Mini Project: Build & Apply

Sitemap.xml generation

📖 Scenario: You are building a website using Next.js. To help search engines find your pages, you want to create a sitemap.xml file that lists all your website URLs.

🎯 Goal: Create a simple sitemap.xml generator in Next.js that outputs a list of URLs in XML format.

📋 What You'll Learn

Create a list of page URLs as strings

Add a base URL configuration variable

Generate XML sitemap content using the URLs and base URL

Export a Next.js API route that returns the sitemap XML with correct headers

💡 Why This Matters

🌍 Real World

Sitemaps help search engines like Google find and index your website pages faster and better.

💼 Career

Generating sitemaps is a common task for web developers to improve SEO and site visibility.

1

Create the list of page URLs

Create a constant array called pages with these exact strings: "/", "/about", "/contact", "/blog".

NextJS

// Create a constant array called pages with the specified URLs
// Your code here

Hint

Use const pages = ["/", "/about", "/contact", "/blog"] to create the list.

2

Add the base URL configuration

Add a constant string called BASE_URL and set it to "https://example.com".

NextJS

const pages = ["/", "/about", "/contact", "/blog"]
// Add a constant BASE_URL with the value "https://example.com"
// Your code here

Hint

Use const BASE_URL = "https://example.com" to set the base URL.

3

Generate the sitemap XML content

Create a function called generateSitemap that returns a string. Use pages.map to create XML <url> entries with full URLs by combining BASE_URL and each page. Wrap all entries inside <urlset> tags with the xmlns attribute set to "http://www.sitemaps.org/schemas/sitemap/0.9".

NextJS

const pages = ["/", "/about", "/contact", "/blog"]
const BASE_URL = "https://example.com"

// Create generateSitemap function that returns sitemap XML string
// Your code here

Hint

Use template strings and pages.map to build the XML entries, then wrap them in <urlset> tags.

4

Export the Next.js API route for sitemap.xml

Export a default async function called handler that takes req and res. Set the response header Content-Type to application/xml. Use res.send to send the string returned by generateSitemap().

NextJS

const pages = ["/", "/about", "/contact", "/blog"]
const BASE_URL = "https://example.com"

function generateSitemap() {
  const urls = pages.map(page => `  ${BASE_URL}${page}`).join('\n')
  return `\n\n${urls}\n`
}

// Export default async function handler(req, res) to send sitemap XML
// Your code here

Hint

Use res.setHeader to set the content type and res.send to send the XML string.

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