EasyFrontend4 min read

How do sitemap.ts and robots.ts work in Next.js?

Q: How do sitemap.ts and robots.ts work in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First A sitemap is the floor plan a museum gives to guide book writers: here is every room. robots.txt is the sign at the staff door: visitors welcome, but not through here. Next.js lets you write both as small functions, so the floor plan updates itself when a new room opens. ## 2. The Core Idea 📌 **Interview term: sitemap.ts** — a metadata route file whose default export returns the list of URLs; Next.js serves it as /sit

71 views

16 of 129

The problem

Question presented to candidate: "How do you add a sitemap and a robots.txt to an App Router project, including URLs that come from the database?"

What a strong answer should cover:

app/sitemap.ts default-exports a function returning an array of { url, lastModified, changeFrequency, priority }; Next.js serves it as /sitemap.xml.
app/robots.ts returns { rules, sitemap } and is served as /robots.txt.
Both can be async and fetch data, so the sitemap can list every product or post.
Static files (public/robots.txt or app/sitemap.xml) also work when nothing is dynamic.
Large sites split the sitemap with generateSitemaps, because one sitemap file is limited to 50,000 URLs.

Clarifying questions expected:

"How many URLs are there?" — decides whether to split sitemaps.
"Which paths must stay out of search?" — they go in robots disallow rules and noindex metadata.

Code / implementation expected: Yes — both files, with URLs from data.

nextjs
sitemap
robots
seo

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

A sitemap is the floor plan a museum gives to guide book writers: here is every room. robots.txt is the sign at the staff door: visitors welcome, but not through here. Next.js lets you write both as small functions, so the floor plan updates itself when a new room opens.

2. The Core Idea

📌 **Interview term: sitemap.t

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

A data-driven sitemap and a robots file

// app/sitemap.ts
import type { MetadataRoute } from "next";
import { getAllProducts } from "@/lib/products";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getAllProducts();
  return [
    { url: "https://shop.example.com/", lastModified: new Date(), priority: 1 },
    ...products.map((p) => ({
      url: `https://shop.example.com/products/${p.slug}`,
      lastModified: p.updatedAt,
      changeFrequency: "weekly" as const,
    })),
  ];
}

// app/robots.ts
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: "*", allow: "/", disallow: ["/admin", "/api/"] }],
    sitemap: "https://shop.example.com/sitemap.xml",
  };
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 16 of 129 in Next.js

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All Next.js questions

Up nextEasy→

How do you create a new Next.js app, and what is in the project structure?

Continue