Technical SEO with Next.js: A Step-by-Step Guide

In brief: When used well, Next.js provides a strong foundation for technical SEO: content can be rendered on the server, metadata is managed in code, sitemap and robots files can be generated programmatically, and image and font optimization are built in. SEO does not happen automatically, though. Choose the right rendering strategy, generate unique metadata and canonical URLs, emit structured data safely, manage URLs and redirects carefully, and measure Core Web Vitals. This guide provides a practical checklist for Next.js App Router; its examples are based on the Next.js 16 documentation.

Last updated: September 2026. APIs can differ between Next.js versions; check the current documentation.

1. Rendering strategy: include content in the first HTML response

Search engines can run JavaScript, but serving content in the initial HTML is more reliable and faster. This matters even more for AI crawlers. Vercel's analysis of AI crawlers says that OpenAI, Anthropic, and Perplexity crawlers do not execute JavaScript, while Gemini can (see our GEO guide).

Next.js rendering options:

Render indexable content in Server Components or fetch it on the server. Content loaded later with useEffect can create SEO risks. Server Components also reduce the JavaScript sent to browsers.

2. metadata API: unique title and description on every page

Next.js manages metadata through either a static metadata object or a data-driven generateMetadata function. The documentation says these are supported only in Server Components and Next.js generates the relevant <head> tags.

/en/ app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug) /en/ share the same data with the page (cache)

  return {
    title: post.metaTitle ?? post.title,
    description: post.metaDescription ?? post.excerpt,
    alternates: { canonical: `https://www.example.com/blog/${slug}` },
    openGraph: { title: post.title, description: post.excerpt, type: 'article' },
  }
}

Tips:

• Title: Make it specific and useful. Set the brand suffix once in the root layout with title.template; adding the brand on every page can duplicate it.
• Description: Write a page-specific summary, roughly 120–160 characters.
• Avoid duplicate fetches: If the page and generateMetadata use the same data, deduplicate it with React cache.
• Bots and streamed metadata: Next.js may stream metadata for dynamic pages. It automatically disables this behavior for bots such as Bingbot that expect metadata inside <head>; configure htmlLimitedBots if needed. For prerendered pages, metadata resolves at build time.

3. Canonical URLs, redirects, and URL discipline

• Canonical: Every page should identify its canonical address. Filter, sorting, and tracking parameter URLs should not become duplicate copies of the main page. Define metadataBase in the root layout and use relative canonicals on individual pages.
• Permanent redirects: When a URL changes, use a 301/308 redirect through redirects() in next.config. Avoid redirect chains.
• International URLs: Keep slugs consistent and easy to manage (for example, services/web-applications). For legacy Turkish-character URLs, add both raw and percent-encoded forms (encodeURIComponent) to redirect rules; otherwise some request forms may not match. Use notFound() for unknown dynamic slugs so the server returns a real 404.
• Result pages: Consider noindex or robots rules for search and filter pages; avoid soft 404s.

4. Sitemap and robots

Next.js can generate sitemap and robots files in code through app/sitemap.ts and app/robots.ts. Fetch all published, indexable URLs (articles, services, products) from the database and include them. Every sitemap URL should return 200 and be canonical. Submit the sitemap in Google Search Console. Check that robots.ts does not accidentally block traditional or AI search crawlers such as OAI-SearchBot.

5. Structured data (JSON-LD)

The Next.js JSON-LD guide recommends adding structured data as a <script type="application/ld+json"> in a layout or page. Security note: JSON.stringify does not escape HTML characters; escape the < to reduce XSS risk:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
  }}
/>

Useful types include Organization, BreadcrumbList, BlogPosting/Article, Product, LocalBusiness, and Service. Markup must match the content visible on the page. Google says no special schema is needed to appear in AI features; structured data clarifies meaning. FAQPage markup remains valid, although Google no longer shows FAQ rich results.

6. Core Web Vitals and performance

Google's good thresholds are LCP ≤ 2.5 seconds, INP ≤ 200 ms, and CLS ≤ 0.1 for 75% of page views. Practical steps:

• Images: Use next/image to optimize size and format; set dimensions with width/height or fill to prevent CLS; set priority on the first-screen LCP image and lazy-load the rest.
• Fonts: Use next/font for local and optimized font loading to reduce layout shifts.
• JavaScript: Prefer Server Components; use use client only for interactive parts and dynamically import heavy libraries.
• Third-party scripts: Load analytics and chat widgets later.
• Caching/CDN: Serve static and ISR pages from a CDN.
• Measurement: Do not rely only on Lighthouse. Monitor Search Console's Core Web Vitals report and real-user data.

7. International and multilingual SEO

A multilingual site needs a separate URL for each language, reciprocal hreflang links, and x-default. Google's multilingual-site guidance says each version should list itself and the other language versions. Next.js metadata can generate these with alternates.languages. Avoid automatically redirecting users based on IP address.

8. Additional notes for AI search

There is no “magic setting” for being cited by AI answers. Google says no special optimization is required to appear in its AI features. The same technical fundamentals still apply: crawlability, content in the first HTML, clear answers, and sourced, current information. See our GEO guide.

Technical SEO checklist

Before launch

• Every indexable page returns 200 and has content in the initial HTML.
• Each page has a unique title and description; the brand suffix appears once.
• Canonicals are correct and parameter or duplicate URLs are managed.
• sitemap.ts and robots.ts are live; only indexable URLs are in the sitemap.
• JSON-LD is valid and matches visible content (Rich Results Test/schema validation).
• Images are optimized; the LCP image is prioritized and causes of CLS are removed.
• Old URLs redirect permanently and 404 pages return the right status.
• Mobile and accessibility checks are complete.

After launch

• Submit the sitemap to Search Console and monitor coverage and Core Web Vitals.
• Review crawled/indexed pages and error reports weekly.
• Review bot access (Googlebot and AI crawlers) and 4xx/5xx responses in server logs.
• Maintain an update schedule for important pages.

What Aktaş Digital does

We build our own site and client projects with Next.js: server-rendered pages, metadata, sitemaps and structured data managed in code, performance budgets, and post-launch Search Console monitoring. Explore our web applications service, contact us about your site's technical SEO through our project inquiry form, or start with our free website analysis tool. For the platform decision, see our guide to WordPress or Next.js for a business website.

Frequently asked questions

Is Next.js automatically better for SEO than WordPress?

No. Content, technical health, and expertise determine search performance. Next.js gives more control over rendering, metadata, and performance; WordPress can be quick to launch with plugins.

Should I use SSR or SSG?

Static generation or ISR is usually fastest and safest for content that rarely changes. Use SSR for content specific to a user or request. Both can put content in the initial HTML.

What is the difference between generateMetadata and metadata?

Use metadata for fixed values and generateMetadata for data-driven title and description, such as for a blog post. Both run in Server Components.

Should I write the sitemap by hand?

No. Generating it automatically from the database with sitemap.ts is more reliable. Make sure it includes every published, indexable page.

Does adding JSON-LD improve rankings?

It does not guarantee a ranking increase. It can help search engines understand a page and make it eligible for supported rich results. Keep it accurate and consistent with the visible content.

Conclusion

Technical SEO in Next.js means using the framework's tools consistently: content in the first HTML, unique metadata and canonicals, clean URLs and redirects, safe JSON-LD, strong Core Web Vitals, and ongoing measurement after launch.