SEO
How do you do SEO for a Next.js application?
Next.js supports SSR and SSG out of the box, which solves the primary JavaScript SEO challenge of rendering content for crawlers. Use the Metadata API (App Router) or next/head (Pages Router) to set title, description, and Open Graph tags per page. Generate a dynamic sitemap with next-sitemap or the App Router's sitemap.ts convention, and implement proper canonical URLs.
Key Considerations
- Use `generateStaticParams` for static generation of high-value pages — SSG is faster and more reliably indexed than SSR
- Implement `robots.ts` and `sitemap.ts` in the App Router for programmatic control over crawling and indexing
- Set proper cache headers: ISR (Incremental Static Regeneration) gives you static performance with dynamic freshness
- Avoid client-side-only rendering for any content you want indexed — use server components by default
- Test with Google's Rich Results Test and "URL Inspection" in Search Console to verify Googlebot sees your rendered content