SEO

Next.js SEO in 2026: The Complete Developer Checklist

SSR, generateMetadata, JSON-LD, Core Web Vitals, sitemaps — a no-fluff checklist every Next.js developer needs before going live.

Team VibeFixer · Senior Content Writer

· 6 min read

Next.js is hands-down the best framework for building SEO-friendly React apps in 2026. But 'built with Next.js' doesn't automatically mean 'good SEO.' The framework gives you the tools — SSR, static generation, the App Router metadata API — but you still have to wire them up correctly. Miss one step and you're leaving rankings on the table. This is the exact checklist we use before every client site goes live.

011. Use generateMetadata — Not Static Exports

The single biggest SEO win in Next.js App Router is generateMetadata(). Unlike the old Head component or a static export const metadata object, generateMetadata runs on the server per request and lets you pull dynamic data — blog titles, product names, og images — from your database or JSON files.

Every dynamic route ([slug], [id], [title]) must use generateMetadata. If you're still setting a single static title on a dynamic page, Google sees the same title tag on every URL — a duplicate content signal that actively hurts your rankings.

Also critical: set metadataBase in your root layout.tsx. Without it, Next.js can't resolve relative OG image URLs to absolute ones, and your Open Graph images silently break.

022. Add JSON-LD Structured Data to Every Page

JSON-LD is how you talk directly to Google. It tells the crawler exactly what type of content is on the page — a blog post, a product, an FAQ, a local business — and unlocks rich results in the SERP: star ratings, FAQ dropdowns, breadcrumbs, article dates.

In Next.js, inject it as a <script type='application/ld+json'> tag inside your page component. For blog posts, use the BlogPosting schema. For your homepage, add Organization. For how-to articles, add FAQPage. These don't guarantee rich results, but they make you eligible — and eligible pages that load fast almost always get them.

The most commonly missed schema in 2026 is BreadcrumbList. It takes five minutes to add and directly influences how your URL is displayed in search results.

033. Generate Your Sitemap and robots.txt Automatically

Next.js App Router can generate both your sitemap and robots.txt as TypeScript files — app/sitemap.ts and app/robots.ts. These output at /sitemap.xml and /robots.txt automatically on build.

Your sitemap should include every indexable page with accurate lastModified dates and priority values. Pages that change often (blog index, homepage) should have higher priority and more frequent changeFrequency. Static pages like your privacy policy can be monthly with lower priority.

Once live, submit your sitemap URL directly in Google Search Console. This doesn't force indexing, but it significantly speeds up discovery — especially for new pages.

044. Fix Core Web Vitals Before You Launch

Core Web Vitals are a direct Google ranking factor. LCP (how fast your largest element loads), CLS (how much your layout shifts), and INP (how responsive your page feels) are measured in the real world by Chrome users and reported in Search Console.

In Next.js, the biggest LCP wins come from using next/image with the priority prop on your hero image, preloading your most important font with <link rel='preload'>, and serving your pages as static (SSG) rather than dynamic (SSR) wherever possible. The biggest CLS culprits are images without explicit width and height, and fonts that load after the page renders. Use font-display: swap and define image dimensions to eliminate both.

055. Set Canonical URLs on Every Single Page

Canonical URLs tell Google which version of a URL is the definitive one. Without them, Google may see yourdomain.com/blog/post, yourdomain.com/blog/post?ref=twitter, and www.yourdomain.com/blog/post as three separate pages — splitting your link equity three ways.

In Next.js App Router, set alternates: { canonical: pageUrl } inside every generateMetadata() call. For static pages, set it in your export const metadata object. Use your NEXT_PUBLIC_BASE_URL environment variable to build the URL — never hardcode the domain. This single step prevents one of the most common and damaging SEO mistakes we see on client sites.

Topics covered

Next.js SEOSEO 2026Core Web VitalsgenerateMetadataJSON-LDTechnical SEOApp Router

Last updated:

Continue reading