Next.js SEO Optimization
Performance is SEO. Google uses Core Web Vitals as ranking signals, and Next.js gives you the primitives to hit every target. This guide covers the optimization techniques that directly impact search rankings.
Server Components and SEO
Next.js App Router defaults to Server Components, which render on the server and send zero client-side JavaScript for their logic. This dramatically reduces bundle size and improves Time to Interactive.
For SEO, Server Components mean search engine crawlers see fully rendered HTML without waiting for JavaScript execution. Content is in the initial HTML response, which is what Googlebot reads first. Client Components should be reserved for interactive elements.
Use the 'use client' directive only when you need browser APIs, event handlers, or React state. Every unnecessary Client Component adds to your JavaScript bundle and increases INP. Keep the interactive layer thin.
Image Optimization
The next/image component automatically optimizes images: lazy loading, responsive sizing, format conversion to WebP/AVIF, and quality adjustment. Always set width and height to prevent Cumulative Layout Shift.
For above-the-fold images, add the priority prop to preload them and improve LCP. Use the sizes prop to tell the browser which image size to load based on viewport width. This prevents downloading oversized images on mobile.
Generate dynamic Open Graph images with opengraph-image.tsx. Each route can have a unique OG image generated at build time. This means your social shares always have the right preview without managing static image files.
Code Splitting and Bundle Size
Next.js automatically code-splits by route — each page only loads the JavaScript it needs. But shared dependencies between pages still end up in the common bundle. Monitor your bundle with @next/bundle-analyzer.
Dynamically import heavy components with next/dynamic. This is especially useful for charts, editors, or any library that is not needed for the initial render. Use the ssr: false option for components that rely on browser APIs.
Tree-shaking only works with ES modules. If a dependency uses CommonJS, the entire module gets included. Check your bundle for unexpectedly large dependencies and look for ESM alternatives.
Core Web Vitals Optimization
LCP optimization: preload hero images, use Server Components for above-the-fold content, minimize server response time with edge runtimes or ISR. The LCP element is usually the largest image or text block in the viewport.
INP optimization: break long tasks into smaller chunks, defer non-critical JavaScript, use React transitions for state updates that do not need to block the UI. Web Workers can offload heavy computation.
CLS optimization: set explicit dimensions on images and videos, reserve space for dynamic content, use the next/font module to eliminate font-swap layout shifts. Never insert content above existing content after the initial render.
Caching and ISR
Incremental Static Regeneration (ISR) lets you update static pages without rebuilding the entire site. Set a revalidate period on your page or use on-demand revalidation for content changes. This keeps pages fast while content stays fresh.
Configure Cache-Control headers for static assets. Next.js sets these automatically for files in /public and _next/static, but verify your CDN respects them. Stale-while-revalidate patterns keep content available while fresh versions generate in the background.
For dynamic pages that change frequently, consider Streaming with React Suspense. The server sends the shell immediately and streams in dynamic content as it resolves. Users see content faster, and crawlers get the full page.
Frequently asked questions
Do Server Components improve SEO?
Yes. Server Components reduce client-side JavaScript, which improves Core Web Vitals (especially INP and LCP). They also ensure content is in the initial HTML response, which is what search engines read first.
What is a good LCP score for SEO?
Under 2.5 seconds is Good, 2.5-4.0 seconds Needs Improvement, over 4.0 seconds is Poor. Google uses the 75th percentile of real user data, so your slowest users matter most.
Should I use SSR or SSG for SEO?
Static generation (SSG) is best for SEO — pages are pre-rendered and served instantly. Use ISR for content that changes. SSR is appropriate for highly dynamic pages, but ensure fast server response times.
Learn more
Related guides
The Complete Next.js SEO Guide
Next.js App Router changed how metadata works. Static exports, generateMetadata, and file-based conventions replaced the old Head component. This guide covers everything you need to ship SEO-correct Next.js apps.
Next.js SEO Checklist 2026
A checklist you can run through before every deploy. Covers the metadata, structured data, performance, and indexation checks that matter for Next.js App Router projects. No fluff — just the items that affect rankings.
Next.js SEO Meta Tags
Meta tags are the foundation of on-page SEO. Next.js App Router replaces the old Head component with a typed metadata API that merges across layouts and pages. Here is how to use it correctly.