Stop 11 · Next.jsTopics · 15/16

SEO

In short

If your page isn't on Google's first page, most people won't find it. Next.js gives you server-rendered HTML, metadata, sitemaps and robots files, which covers most of the technical side.

Next.js-specific SEO tooling — the metadata API, automatic sitemap/robots generation, and SSR/SSG rendering that ensures crawlers see fully-rendered content.

The jaadu pulls an index card from a wooden library card catalogue drawer.

Think of it like this

The library catalogue

A book with no catalogue entry, no title on the spine and pages glued shut won't get borrowed. Search engines are librarians. Give them clear titles, a list of every page (sitemap) and pages they can actually open (rendered HTML).

Watch it happen

A crawler visits your site

Crawler

Your site

GET /robots.txt

1/5Crawlers check robots.txt first to see which paths to skip.

The big ideas

What you need to know

Content in the HTML

Server and static rendering put your text in the first HTML, so crawlers see it without running JavaScript.

sitemap.ts

Export a function from app/sitemap.ts that returns your URLs. Next.js serves it at /sitemap.xml.

robots.ts

app/robots.ts tells crawlers which paths to skip, like /admin, and where your sitemap lives.

Canonical URLs

If one page has several URLs, alternates.canonical in metadata tells Google which one is the main one.

See it in code

Walk through the code

1// app/sitemap.ts2import type { MetadataRoute } from "next";3import { getAllPosts } from "@/lib/posts";4 5export default async function sitemap(): Promise<MetadataRoute.Sitemap> {6  const posts = await getAllPosts();7  return [8    { url: "https://example.com", lastModified: new Date() },9    ...posts.map((p) => ({10      url: `https://example.com/blog/${p.slug}`,11      lastModified: p.updatedAt,12    })),13  ];14}

1/4app/sitemap.ts exports a function. Next.js serves its result at /sitemap.xml.

Every blog post gets listed automatically. Add a new post and the sitemap updates with it.

Save yourself the pain

Common mistakes

Oops

Loading your main page content with useEffect on the client.

Do this instead

Render it on the server so it's in the HTML that crawlers read first.

Oops

Forgetting to block admin or test pages from search results.

Do this instead

Disallow them in robots.ts, and add noindex via the robots field in metadata for extra safety.

Your mission

Run an SEO check-up

~30 min

Quick check

Why is server-rendered HTML good for SEO?

Go deeper

1Generate a `sitemap.xml` and `robots.txt` using Next.js's file conventions.
2Audit a Next.js page's rendered HTML (view-source) to confirm content isn't client-only.
3Add structured data (JSON-LD) to a key page for rich search results.