SEO for Next.js Apps — Complete Guide

Next.js has excellent SEO support through its App Router metadata API and server-side rendering capabilities. Search engines can index server-rendered HTML directly without executing JavaScript, which is a major advantage over pure client-side apps. The App Router's `generateMetadata` function lets you generate dynamic titles and descriptions per page. Start by auditing every page in your app for a unique, descriptive title and a meta description under 160 characters.

Export a `metadata` object from any `page.tsx` to set static titles, descriptions, and Open Graph tags. For dynamic pages, export an async `generateMetadata` function that fetches the relevant record and returns appropriate metadata. Use the `title.template` feature in your root layout to append your site name automatically: `{ template: '%s | MyApp', default: 'MyApp' }`. Always set `og:image` with a 1200x630 pixel image so your pages look good when shared on social media.

Create a `sitemap.ts` file in your app root that returns a `MetadataRoute.Sitemap` array listing all indexable URLs with their last-modified dates. For large sites, generate sitemaps dynamically by querying your database for all published records. Add a `robots.ts` file that allows all crawlers and points to your sitemap URL. Submit your sitemap to Google Search Console after deploying to accelerate indexing of new pages.

Add JSON-LD structured data to unlock rich results in search — star ratings, FAQ dropdowns, and breadcrumbs make your listings stand out. Inject a `<script type='application/ld+json'>` tag in your page component with the appropriate schema.org type. For a SaaS product, use `SoftwareApplication` schema with pricing and rating information. For blog posts, use `Article` schema with `datePublished` and `author` fields. Test your structured data with Google's Rich Results Test tool.

Google uses Core Web Vitals — LCP, CLS, and INP — as ranking signals, so performance directly affects SEO. Measure your scores using Google Search Console's Core Web Vitals report or PageSpeed Insights. Fix CLS by always specifying `width` and `height` on images and avoiding dynamically injected content above the fold. Improve LCP by preloading your hero image with the `priority` prop on Next.js `Image` components and serving images from a CDN.

AI-generated apps often have identical or missing metadata across pages, which causes search engines to treat them as duplicate content. Client-side-only data fetching means key content is not visible to crawlers — move it to server components. Avoid large JavaScript bundles that slow down page load and hurt Core Web Vitals scores. Ensure internal links use `<Link>` tags rather than JavaScript navigation so crawlers can discover all your pages.