Next.js SEO Guide: Build Search Engine Optimized Websites with Next.js 16
Next.js is one of the most SEO-friendly React frameworks available — but only if configured correctly. This guide covers everything from the new Metadata API and server components to sitemaps, OG images, and performance optimisation for maximum search visibility.
Why This Matters for Your Business
The real cost of not fixing these issues — and why most businesses get stuck.
Next.js has great SEO defaults but developers still get it wrong
Next.js provides server-side rendering, the metadata API, and automatic image optimisation — all built-in SEO advantages. But developers often miss critical details: missing canonical URLs, duplicate metadata for dynamic routes, ignoring sitemap generation, not setting up proper heading hierarchy, or forgetting to optimise images. These small mistakes add up to significant ranking losses.
Static export mode has limitations that hurt SEO if ignored
When you export a Next.js site as static HTML (like curvemetrics.in does), you lose dynamic features like ISR, API routes, and server-side rendering. Dynamic metadata, redirects, and headers must be configured at build time. Without careful planning, static exports can produce pages without proper meta tags or with broken canonical URLs — issues that directly impact search rankings.
Core Web Vitals are where most Next.js sites lose rankings
Next.js apps often suffer from high Cumulative Layout Shift (CLS) because of unoptimised images and fonts without proper size attributes. Large JavaScript bundles can push Interaction to Next Paint (INP) beyond acceptable thresholds. And without proper caching and CDN configuration, server response times increase Time to First Byte (TTFB). All three metrics directly affect Google rankings.
Key Insight
Businesses that address these three challenges see an average of 40-60% improvement in lead conversion within 90 days. The cost of inaction is not just lost revenue — it is compounded lost opportunity as competitors automate while you stay manual.
What We Evaluate
Every implementation covers these key areas to ensure nothing is missed.
Metadata Implementation
Checks if every page uses Next.js Metadata API with unique title, description, canonical, and OG tags for all routes including dynamic ones.
Static Export Readiness
Verifies that static export configuration handles dynamic routes, metadata, redirects, and sitemaps correctly for sites using output: 'export'.
Core Web Vitals Scores
Measures LCP, INP, CLS, TTFB, and FCP for your Next.js site across desktop and mobile using field data from CrUX and lab data from Lighthouse.
Image Optimisation
Evaluates whether next/image is used properly with correct sizes, priority attributes, and lazy loading to avoid layout shift and excessive bandwidth.
Sitemap & Robots Configuration
Checks if sitemap.ts generates complete sitemaps covering all indexable routes, and if robots.txt correctly directs crawlers.
Your Step-by-Step Action Plan
Follow these steps in order. Each one builds on the last.
Real Results, Real Business
See how another business solved the same problems you are facing.
A Next.js marketing site doubled organic traffic after fixing basic SEO configuration
A Pune-based SaaS company built their marketing website on Next.js with static export. Despite having great content, they were stuck at 8,000 monthly organic visitors. An SEO audit revealed multiple issues: the Metadata API was used only in the root layout — all subpages had empty titles and no descriptions, the sitemap only included 4 main routes (missing 23 blog posts and 8 case studies), OG images were not implemented so social shares showed blank previews, and images lacked explicit dimensions causing 0.32 CLS on mobile. After fixing each issue — dynamic metadata per route, complete sitemap generation, OG image API implementation, and image optimisation — their organic traffic grew to 18,500 monthly visitors within 4 months. The sitemap fix alone got 27 new pages indexed within 2 weeks.
Your Action Plan
Fix things in stages — from immediate wins to advanced automation
Quick Fixes — Today
- Use generateMetadata function in every dynamic route to set unique title and description per page
- Add explicit width and height to all next/image components to eliminate layout shift
- Generate and submit a complete sitemap that includes every indexable page route
- Use next/font with display: swap and preload to prevent font-related CLS
Short-Term — 1 Week
- Implement dynamic OG image generation using @vercel/og or ImageResponse for every page
- Create a proper robots.ts and sitemap.ts with all routes, lastmod dates, and priority values
- Migrate from client components to server components wherever possible to reduce JavaScript
- Set up caching headers and CDN configuration for static pages to improve TTFB globally
Growth — 30 Days
- Implement incremental static regeneration for content pages that need periodic updates
- Build an automated SEO testing suite using Lighthouse CI in your GitHub Actions pipeline
- Create a component library with built-in metadata handling for reusable page sections
- Set up real-time Core Web Vitals monitoring using web-vitals library and analytics
Advanced — 90 Days
- Implement streaming SSR for dynamic pages to improve time-to-first-byte and perceived performance
- Build a headless CMS integration that auto-generates metadata fields in the CMS admin panel
- Create a multilingual SEO setup with hreflang tags and locale-specific sitemaps
- Implement edge functions for personalised content delivery without sacrificing SEO
Ready to make your Next.js site rank higher and load faster?
Curve Metrics specialises in building SEO-optimized Next.js websites — from metadata configuration and Core Web Vitals optimisation to static export deployment. Run a free Website Audit or talk to us about your Next.js project.
Frequently Asked Questions
Is Next.js better than plain React for SEO?
Yes. Next.js offers server-side rendering and static site generation out of the box, a built-in Metadata API for per-page SEO, automatic image optimisation, and file-based routing that naturally creates SEO-friendly URL structures.
Does Next.js static export support all SEO features?
Most features work with static export — metadata, sitemaps, robots.txt, structured data, and OG images all generate at build time. The limitations are: no ISR, no server-side redirects, and dynamic OG images require API routes which do not work in static mode.
How do I handle dynamic metadata for blog posts in Next.js?
Use the generateMetadata function which accepts params and searchParams. Fetch the blog post data inside generateMetadata and return title, description, openGraph, and alternates.canonical. This runs at build time for SSG or at request time for SSR.
Why is my Next.js site getting poor Core Web Vitals scores?
Common causes: unoptimised images without dimensions (CLS), large client-side JavaScript bundles (INP), slow server response from unoptimised API endpoints (TTFB), and missing font optimisation. Use the Next.js build analyzer and Lighthouse to identify specific issues.
Should I use SSR, SSG, or ISR for my Next.js site?
SSG (static generation) is best for content sites, blogs, and marketing pages — fastest performance. SSR is needed for personalised or frequently-changing content. ISR combines both — static with periodic revalidation. For SEO, SSG gives the best Core Web Vitals scores.
Can I use next/image with external image sources?
Yes, but you must configure remotePatterns in your next.config.js to whitelist external domains. Without this, next/image will not optimise external images and may not render them at all in production. Always serve images from your own domain or a configured CDN for best performance.