Next.js is arguably one of the best frameworks for SEO, thanks to its server rendering, fast load times and dedicated metadata API. However, being "good by default" is not the same as being "optimized". This practical guide will guide you through each SEO technical lever available in a Next.js project using the App Router. We will cover the Metadata API, rendering strategies, sitemaps, structured data, and much more.
The App Router introduced a first-class Metadata API that replaces the legacy Head component in the Pages Router. It is declarative, typed, and integrates perfectly with the Server Components.
For pages whose metadata does not depend on dynamic data, simply export an object metadata.
generateMetadataFor pages whose metadata depends on URL parameters or database data (such as blog articles), use the generateMetadata.
Thanks to the title.template property defined in the root layout, any child page that defines for example title: "About" will automatically have its title rendered as "About | Your Name" in the browser.
The choice of the rendering strategy is the most impactful SEO decision you will make. A bad choice can make your efforts on metadata pointless.
In a classic React SPA, the initial HTML is often an empty container (root container id) that waits for JavaScript to execute before displaying the content. Googlebot can run JavaScript, but it doesn’t do so immediately. It queues your page for a second render run, which can take days or never arrive until the next crawl cycle.
The HTML is generated at build time and served from a CDN. It’s the gold standard for SEO.
The best of both worlds for content that changes, but not with every request.
The HTML is generated for each request. SEO remains strong, but you lose the advantage of the CDN cache.
| Strategy | Utilization | SEO Impact |
|---|---|---|
| SSG (Static) | Rarely modified content | Excellent - Pre-rendered HTML |
| SSR | Dynamic content per case | Very good - Server-side Rendering |
| ISR | Large sites, periodically updated content | Excellent - Static + incremental updates |
These two files are essential to guide search engines in exploring your site.
Create a app/sitemap.ts file to generate a dynamic sitemap.
Create a app/robots.ts file to configure crawl rules.
Structured data (JSON-LD) helps search engines understand the context of your content and generate rich snippets in search results.
Social sharing images are essential for the click-through rate from social networks. Next.js provides the ImageResponse API to generate OG images dynamically.
Performance is a direct ranking factor. Google measures the Core Web Vitals (LCP, FID, CLS).
Use the Next.js component Image tag for automatic lazy loading, resizing, and WebP conversion.
next/font eliminates the layout shift caused by web fonts, which directly impacts your CLS score.
For multilingual sites, the use of subpaths (/en/, /en/) is recommended for SEO.
Don’t forget to add the hreflang tags to your metadata:
Before going into production, run this quick audit:
robots.txt: https://your-website.com/robots.txthttps://your-website.com/sitemap.xmltitle and meta name="description" tags.application/ld+json.Mastering SEO with Next.js App Router is a process that combines the understanding of fundamentals (rendering, metadata) to the implementation of technical details (sitemaps, structured data). This guide has provided you with the keys to turn your Next.js site into an organic traffic generating machine. The framework gives you a solid foundation, but it’s your attention to detail that will make the difference.
Did you like this article? Do not hesitate to share it and contact me for any questions or projects!
*"AI writes the lines, but it’s the architect who writes the story."* We live in fascinating times. With the advent of GitHub Copilot, ChatGPT and Claude, the barrier to entry for "creating a website...