How to add sitemap in Next.js app?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
To add a sitemap in Next.js app router, you can use the next-sitemap package. First, install it:
npm install next-sitemap
Then, create a next-sitemap.config.js file in the root of your project and configure your sitemap options.
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: process.env.SITE_URL || "https://example.com",
generateRobotsTxt: true, // (optional)
changefreq: "daily", // (optional)
priority: 0.7, // (optional)
sitemapSize: 7000, // (optional)
exclude: ["/404", "/500"], // (optional)
robotsTxtOptions: {
policies: [
{ userAgent: "*", allow: "/" },
{ userAgent: "Googlebot", disallow: "/private" },
],
},
};
Finally, run the following command to generate the sitemap:
npx next-sitemap
This will create a sitemap.xml file in the public directory of your Next.js app.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.