Does Next.js Server-Side Rendering guarantee AI crawlers can read my page?

Not automatically. In Next.js App Router, client components pre-render their initial synchronous JSX, so any text loaded inside `useEffect` or client-only queries is absent from initial HTML. `clickd_check` (`kind: "agent"`) tests the exact HTML delivered without JavaScript.

Does this work with both Next.js App Router and Pages Router?

Yes. Your coding agent inspects your repository first (`app/` vs `pages/`) and uses `generateMetadata` on App Router or `getServerSideProps` / `getStaticProps` with `next/head` on Pages Router.

Integrations/Next.jsWeb framework

Next.js SEO for AI agents

Next.js gives you Server Components, generateMetadata and typed route handlers, yet live Next.js sites routinely fail search and AI crawler checks because of top-level 'use client' pages, missing metadataBase canonicals and unescaped JSON-LD.

1. Add all 16 skills to your repositorynpx skills add subinternal/clickd

2. Ask your agentAudit our live Next.js site with clickd_brief and clickd_check (kind: "agent"), fix client-only pages, generateMetadata canonicals and JSON-LD in app/, and rescan.

For teams shipping on Next.js App Router or Pages Router with Claude Code, Codex or Cursor.Connect MCP Read as .md

What breaks most often on Next.js

What clickd catches when it fetches the live URL the way Googlebot and AI crawlers do.

See the rulebook

Top-level 'use client' route shellsMarking app/*/page.tsx with 'use client' and fetching copy in useEffect ships an empty HTML shell that non-JS AI crawlers cannot read.content-in-html
Missing metadataBase and per-route canonicalsInheriting the root layout’s metadata without setting alternates.canonical per dynamic route leaves dozens of pages missing or sharing canonicals.canonical
Unescaped JSON-LD script blocksRendering <script type="application/ld+json"> without escaping < as \u003c risks broken markup or script injection when titles contain special characters.structured-data

The Next.js agentic SEO loop

Four steps your agent runs between your codebase and clickd’s live crawler.

01Check non-JS HTML
Run clickd_brief and clickd_check (kind: "agent") on your deployed Next.js routes to see what ships in raw HTML.
clickd_check
02Move copy to Server Components
Keep page.tsx as an async Server Component and isolate interactive widgets into small leaf client components.
technical-seo
03Wire generateMetadata & sitemap.ts
Set metadataBase in app/layout.tsx, export generateMetadata on dynamic routes, and build app/sitemap.ts.
page-system
04Deploy & rescan live
Ship to Vercel or your host, then call clickd_rescan and clickd_changes to verify every route passes.
clickd_changes

Worked pattern

Server-rendered copy, per-route canonical metadata, and escaped JSON-LD from one data lookup.

`app/services/[slug]/page.tsx`

Sample

import type { Metadata } from &#39;next&#39;;
import { getService } from &#39;@/lib/services&#39;;

export async function generateMetadata({ params }: { params: Promise&lt;{ slug: string }&gt; }): Promise&lt;Metadata&gt; {
  const { slug } = await params;
  const svc = await getService(slug);
  return {
    title: `${svc.title} · Example Co`,
    description: svc.summary,
    alternates: { canonical: `https://example.com/services/${slug}` },
  };
}

export default async function ServicePage({ params }: { params: Promise&lt;{ slug: string }&gt; }) {
  const { slug } = await params;
  const svc = await getService(slug);
  const ld = { &#39;@context&#39;: &#39;https://schema.org&#39;, &#39;@type&#39;: &#39;Service&#39;, name: svc.title, description: svc.summary };
  return (
    &lt;main&gt;
      &lt;h1&gt;{svc.title}&lt;/h1&gt;
      &lt;p&gt;{svc.answerFirst}&lt;/p&gt;
      &lt;script type=&quot;application/ld+json&quot; dangerouslySetInnerHTML={{ __html: JSON.stringify(ld).replace(/&lt;/g, &#39;\\u003c&#39;) }} /&gt;
    &lt;/main&gt;
  );
}

Prompts to run on Next.js

Copy any prompt into Claude Code, OpenAI Codex, Cursor or Windsurf.

Audit SSR vs client componentsRun clickd_check (kind: "agent") across our key Next.js routes and refactor any page fetching primary copy inside useEffect into an async Server Component.
Fix generateMetadata across app/Find every Next.js route failing title, description or canonical rules in clickd_pages and wire generateMetadata with metadataBase.
Generate app/sitemap.ts & llms.txtBuild app/sitemap.ts and app/llms.txt/route.ts from our route data so every public page is listed automatically, then verify live.

Skills to pair with Next.js

Included when you run npx skills add subinternal/clickd.

All 16 skills

Technical SEOAudits and fixes crawlability, indexing, robots.txt, XML sitemaps, canonicals, redirect chains, server-rendered HTML and security headers in your site’s codebase, then checks every fix live with clickd.See skill
Page systemBuilds a site’s page templates and shared components so crawlers and assistants read every page well, and proves each pattern with clickd. About structure and spacing, not color, type or brand.See skill
Schema markupGenerates, wires and validates JSON-LD structured data (Organization, LocalBusiness, Product, Service, Article, FAQPage and BreadcrumbList) from the visible facts on your pages, checked live with clickd.See skill
llms.txtAdds a /llms.txt to a site, a plain text outline for AI assistants built from the site’s own pages and facts, with tests that catch a missing page, and checks it with clickd.See skill

Questions about Next.js & clickd

Does Next.js Server-Side Rendering guarantee AI crawlers can read my page?: Not automatically. In Next.js App Router, client components pre-render their initial synchronous JSX, so any text loaded inside useEffect or client-only queries is absent from initial HTML. clickd_check (kind: "agent") tests the exact HTML delivered without JavaScript.
Does this work with both Next.js App Router and Pages Router?: Yes. Your coding agent inspects your repository first (app/ vs pages/) and uses generateMetadata on App Router or getServerSideProps / getStaticProps with next/head on Pages Router.

Other integrations & stacks

All integrations

Google Search ConsoleTeams who want their coding agent driven by real Search Console impressions instead of guessed keyword volume.Data source
AstroTeams running marketing sites, docs and content hubs on Astro.Web framework
ShopifyShopify and Shopify Plus stores on Liquid themes or Hydrogen headless storefronts.Storefront & CMS
WordPressTeams managing custom WordPress block/classic themes, WooCommerce stores or headless WordPress.Storefront & CMS
WebflowMarketing and design teams running Webflow CMS sites alongside an AI assistant.Storefront & CMS
SvelteKitEngineering teams building web apps and marketing sites on SvelteKit and Svelte 5.Web framework
Lovable, Bolt, v0 & React SPAsFounders and developers shipping Vite, React SPA, Lovable, Bolt, v0 or Replit apps.App builder