Next.js SEO: Build a Site Google and AI Will Cite

TL;DR Good Next.js SEO starts from a strong base. Next.js is built for search out of the box, and App Router Server Components hand crawlers fully rendered HTML, so your content is there before any JavaScript runs. But the framework will not do everything. Structured data, sitemaps, robots rules and canonicals are still your job. Get the Metadata API right and add schema, and you are most of the way to ranking in Google and getting cited by AI.

You have the tools. Now use them.

You are on Next.js, and you want to show up in Google and in AI answers. Good news: the framework hands you most of the SEO primitives for free. The catch: it hands you the tools, not the results. Next.js SEO is about using those primitives correctly, not hoping the framework does it for you.

This guide skips the theory and gets to the work. We will cover the Metadata API, rendering choices, the jobs Next.js will not do for you, and how to structure pages so large language models cite them. Whether you write it next js seo or nextjs seo, the playbook is the same.

Why Next.js is good for SEO

Start with what you get for free, because it is a lot.

In the App Router, Server Components render on the server by default. Crawlers receive fully formed HTML with no JavaScript gymnastics, which removes the single biggest cause of JS SEO failures. On top of that you get SSR, SSG and ISR when you need them, automatic code splitting so pages stay light, and built-in image and font optimization that helps Core Web Vitals. Streaming helps too: Next.js can send HTML in chunks as it is ready, so crawlers and users get meaningful content sooner instead of waiting for the whole page. That is a strong foundation. Now the work that actually moves rankings.

The Metadata API

This is where most Next.js SEO is won or lost, so spend time here.

Next.js gives you two ways to set page metadata. A static metadata export is for pages where the title and description never change, like your homepage or an about page. The generateMetadata function is async, for pages where metadata depends on data, like a blog post or a product pulled from a CMS. Use the static export when the values are fixed, generateMetadata when they are dynamic. Reaching for generateMetadata on a static page just adds overhead.

A few things to set deliberately:

• Title templates. Define a template in your root layout, something like "%s | Your Brand", so every page gets a consistent, branded title without repeating yourself.
• Canonical URLs. Set the canonical through the alternates field in your metadata. This is the single most common thing teams forget, and it causes duplicate-content headaches.
• Open Graph and Twitter cards. Set these so links shared on social and in chat apps render with the right title, description and image. They also feed the preview some AI tools show.

One more thing the Metadata API gives you cheaply: per-page control with sensible inheritance. Set defaults in the root layout, override them only where a page differs, and you avoid both duplicate titles and the chore of writing metadata for every route by hand.

You configure all of this in code, by page or by layout. Name the fields, set them once per template, and most of your on-page SEO is handled.

Rendering choices for SEO

Rendering strategy decides what crawlers receive, so choose it on purpose.

In the App Router, components are Server Components by default, which is what you want for SEO. Go static for pages that do not change per request, and dynamic only when a page genuinely needs per-request data. Partial Prerendering, the newer model, lets you serve a static shell instantly while streaming in the dynamic parts, so you get static speed without giving up dynamic content.

A practical warning: marking a whole route dynamic when only one small part needs live data throws away the caching that makes Next.js fast. Push the dynamic bit down to the component that needs it and keep the rest static. Your Core Web Vitals, and your rankings, will thank you.

The deep theory on rendering and crawling lives in our JavaScript SEO guide pillar. For Next.js, the rule of thumb: default to server-rendered, go static where you can, and reserve client-side rendering for interactive widgets that do not need to rank.

What Next.js does NOT do automatically

Here is what trips teams up. Next.js handles head tags and rendering. It does not handle the rest of technical SEO for you.

• Structured data. There is no automatic JSON-LD. You add Article, FAQ and Organization schema yourself, usually by rendering a script tag with your JSON-LD in the relevant pages.
• Sitemaps. Next.js gives you a file-based convention: add a sitemap.ts file and it generates the sitemap. But you have to build it and keep it accurate.
• Robots rules. Same idea: a robots.ts file generates your robots.txt. Useful, but it is on you to define the rules.
• Internal linking. The framework will not link your pages together sensibly. That is an editorial job.
• Canonical discipline. The Metadata API lets you set canonicals; it will not decide your canonical strategy. You have to.

None of this is hard. It just does not happen by default, and teams who assume it does end up with gaps.

Pairing Next.js with a headless CMS

Most Next.js content sites pull from a headless CMS like Sanity, Contentful or Strapi. The CMS holds your content; Next.js renders it. For SEO, the same rules apply: render that content on the server, generate metadata from the CMS fields with generateMetadata, and add schema per template. Done right, headless CMS SEO on Next.js is as clean as a static site.

Structuring a site LLMs will cite

This is the reason to read a 2026 Next.js SEO guide instead of a 2022 one. Ranking in Google is table stakes. Getting cited by ChatGPT, Perplexity and Google AI Overviews is the new game, and Next.js suits it well if you structure for it.

• Server-render answer-format content. Lead sections with a clear question heading and a direct answer underneath. AI models lift clean, self-contained answers, and Server Components put that content right in the HTML.
• Add JSON-LD schema. Article, FAQ and Organization schema help models understand what your page is and who you are.
• Keep a clean heading hierarchy. One H1, logical H2s and H3s. Models use structure to parse meaning.
• Keep entity facts consistent. Your brand name, services and key numbers should match across pages, so models build a stable picture of you.
• Use dynamic OG images. Next.js can generate Open Graph images per page at the edge. Better link previews lift click-through, which feeds the signals that matter.
• Publish an llms.txt. This emerging file tells AI crawlers what your site offers and where the important content is.

The reason this works is that models reward content they can extract cleanly. A page that answers a specific question in the first two sentences under a clear heading is easy to quote. A page that makes the model wade through preamble is not. Structure is not decoration here, it is the difference between being the cited source and being skipped.

Do these and you are not just ranking, you are feeding the engines that increasingly sit between your content and your audience.

Common Next.js SEO mistakes

A fast list of the mistakes we see most:

• Using generateMetadata for static pages. It adds overhead with no benefit. Use the static export.
• Trying to export metadata from a client component. The Metadata API only works in Server Components. Move metadata up to a server component or layout.
• Missing canonicals. The most common gap, and a reliable source of duplicate-content problems.
• Weak loading states. Janky skeletons and layout shift hurt Core Web Vitals, which hurts rankings.
• Content that only exists client-side. The classic JavaScript SEO trap. If it matters for search, render it on the server.

Most of these come from treating Next.js like a client-side React app. It is not, and your SEO improves when you stop building it like one.

No more technical excuses

Next.js removes the technical excuses. Rendering is handled, metadata is a few lines of code, sitemaps and robots are file conventions away. So the real work is structure and content: schema, clean hierarchy, consistent facts, and answers worth citing.

That is the trade Next.js offers: it handles the hard plumbing so you can spend your effort where rankings are actually decided, on content and structure.

If you want a second set of eyes on your build, we run Next.js SEO and GEO audits. We will check your Metadata API setup, your rendering choices, your schema and your AI-search readiness, then hand you a prioritised fix list. New to the framework's rendering model? Start with our JavaScript SEO guide pillar, and if you are still choosing a platform, the Webflow vs Vercel SEO guide comparison will help.

Frequently asked questions

Is Next.js good for SEO?

Yes, and it is one of the better choices. App Router Server Components send crawlers fully rendered HTML, and you get SSR, SSG, ISR, the Metadata API, and built-in sitemap and robots conventions. You still have to add schema, canonicals and good structure, but the foundation is strong.

What is the difference between metadata and generateMetadata in Next.js?

The static metadata export is for fixed values that never change, like a homepage title. generateMetadata is an async function for metadata that depends on data, like a blog post pulled from a CMS. Use static when you can, generateMetadata when the values are dynamic.

How do I add a sitemap and robots.txt in the Next.js App Router?

Use the file-based conventions. Add a sitemap.ts file to generate your sitemap, and a robots.ts file to generate robots.txt. Both run at build or request time. The framework wires them up; you define the URLs and rules.

Does Next.js generate structured data automatically?

No. Next.js handles head tags and rendering, but JSON-LD is a manual job. Add Article, FAQ and Organization schema yourself by rendering a script tag with your structured data on the relevant pages.

Can client components rank in Google?

They can, since Google renders JavaScript, but it is risky. Content that only exists in a client component may render slowly or inconsistently, and many AI crawlers will not run it at all. Keep content that needs to rank in Server Components.

How do I get a Next.js site cited in AI search?

Server-render answer-format content with clear question headings, add Article and FAQ schema, keep a clean heading hierarchy, keep your entity facts consistent across the site, and publish an llms.txt. Citation follows clear, structured, server-rendered answers. Consistency is the quiet multiplier: the more your facts line up across pages, the more confidently a model will quote you.

App Router or Pages Router for SEO?

App Router, for new builds. Its Server Components render on the server by default, the Metadata API is cleaner, and features like Partial Prerendering are built around it. The Pages Router still works, but the App Router is where the SEO tooling is heading.