Sign in
Skip to solution
easyFrontend

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

71 views
01

Understand the problem

Programmatic SEO files via convention.

nextjssitemaprobotsseo
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

app/sitemap.ts exports a function returning your URLs (with lastModified, priority) and Next.js serves /sitemap.xml; app/robots.ts returns rules and serves /robots.txt. Both can be dynamic (fetch routes from a DB) and are generated at build or on request.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Dynamic sitemap + robots
// app/sitemap.ts
import type { MetadataRoute } from 'next';
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  return posts.map((p) => ({ url: `https://site.com/blog/${p.slug}`, lastModified: p.updatedAt }));
}

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return { rules: { userAgent: '*', allow: '/', disallow: '/admin' },
           sitemap: 'https://site.com/sitemap.xml' };
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 11 of 95 decoded in the Next.js track. One more won't hurt.

Back to track