@aischemagen/nextjs
v0.7.0
Published
Server-side Schema.org JSON-LD injection for Next.js sites, powered by AI Schema Gen. Renders structured data into the initial HTML so search engines and AI crawlers (GPTBot, ClaudeBot, PerplexityBot) see it without executing JavaScript.
Maintainers
aischemagenReadme
@aischemagen/nextjs
Server-side Schema.org JSON-LD injection for Next.js sites, powered by AI Schema Gen.
Schema you manage in the Manage Schemas dashboard renders as a real
<script type="application/ld+json"> tag baked directly into the page. No
client-side JavaScript, so it's visible to crawlers that don't execute JS
(GPTBot, ClaudeBot, PerplexityBot, Google-Extended), not just to Googlebot.
The <AISchemaGen> component also injects any head tags you turn on from the
dashboard, from a small fixed set: a <link rel="canonical"> to the page's own
URL, a site-wide <meta name="robots">, and a <meta name="description">.
Next.js hoists these into <head> automatically. All are off by default, so a
plain Next.js site keeps full control of its own <head> until you opt in.
Pages stay pre-built and instant, served the same way every time, exactly like the WordPress plugin serves from its own local copy. A page is only refreshed when its schema actually changes on the dashboard, not recomputed on every visit.
Prerequisites
- A Next.js site using the App Router (Next.js 13.4+), deployed somewhere with a running server (Vercel, or any Node.js host, not a fully static export with no server at all)
- A site added under Sites in the AI Schema Gen dashboard, with a
publish token (Sites → your site → Get Code), or set up automatically
by the
setup_nextjs_schematool via the AI Schema Gen MCP server
Install
npm install @aischemagen/nextjsSetup
1. Add the revalidate route — this is what lets dashboard changes go live in seconds without a rebuild.
// app/api/aischemagen/revalidate/route.ts
import { createRevalidateHandler } from '@aischemagen/nextjs/revalidate';
export const POST = createRevalidateHandler(process.env.AISCHEMAGEN_PUBLISH_TOKEN!);2. Add the content route — this is what lets bulk generation read your pages' own content directly from your deployment in one request, instead of fetching each page's public URL individually (which several hosts' DDoS/bot protection can flag once a bulk job touches a dozen-plus pages back to back).
// app/api/aischemagen/content/route.ts
import { createContentHandler } from '@aischemagen/nextjs/content';
export const POST = createContentHandler(process.env.AISCHEMAGEN_PUBLISH_TOKEN!);3. Add the llms.txt route (optional) — serves an llms.txt map of your
site for AI systems (your name, a one-line summary, and the pages worth
reading), built from your Entity Profile and page list on the dashboard. It
does not affect your readiness score. Skip this if you already serve your own
/llms.txt.
// app/llms.txt/route.ts
import { createLlmsTxtHandler } from '@aischemagen/nextjs/llms-txt';
export const GET = createLlmsTxtHandler(process.env.AISCHEMAGEN_PUBLISH_TOKEN!);4. Set your publish token as an environment variable, AISCHEMAGEN_PUBLISH_TOKEN
(local .env, and your host's production env vars, e.g. Vercel → Settings →
Environment Variables).
5. Add the component to each page that needs schema, passing that exact page's own URL:
// app/pricing/page.tsx
import { AISchemaGen } from '@aischemagen/nextjs';
export default function PricingPage() {
return (
<>
<AISchemaGen
publishToken={process.env.AISCHEMAGEN_PUBLISH_TOKEN!}
url="https://example.com/pricing"
/>
{/* page content */}
</>
);
}For a page with a variable part in its address (a blog post, product page, etc.), build the URL from that page's own params instead of a fixed string:
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
return (
<>
<AISchemaGen
publishToken={process.env.AISCHEMAGEN_PUBLISH_TOKEN!}
url={`https://example.com/blog/${params.slug}`}
/>
{/* page content */}
</>
);
}That's it. Deploy once, and from then on, add, edit, or remove schema on the dashboard exactly like you would for a WordPress site, the affected page refreshes itself within seconds, automatically. Pages with no schema render nothing, no errors, no empty tags.
6. Verify the connection. If you set this up through the AI Schema Gen MCP
server, run setup_nextjs_schema with verify: true after deploying — it
checks the revalidate route is live and marks the site connected. Otherwise the
site connects on its own the first time a page fetches its schema.
Why per-page, not once in the layout
A shared layout has no reliable way to know which specific page is currently being viewed without forcing every page on the site to be rebuilt fresh on every single visit, which is exactly what this package is designed to avoid. Passing the URL directly, on the one or two pages that actually need it, keeps the rest of the site exactly as fast and cheap as it already is.
How it fits with the rest of AI Schema Gen
Generate and manage schema the same way you would for a WordPress site: from the dashboard, via the API, or via the MCP server if you're driving it from an AI coding assistant. This package is only the delivery mechanism, it doesn't generate anything itself.
About the publish token
The publish token is not your API key. It's a low-privilege, single-site credential (the same idea as a Stripe publishable key), safe to store as a plain environment variable. It can fetch schema already generated for that one site, trigger a refresh of that site's own already-known pages, and read that site's own already-public page content back for bulk generation — it can't generate new schema itself, spend quota, or read anything about your account. Rotate it any time from Sites → your site if it ever needs to be revoked.
Advanced: fully static-exported sites
If your site uses output: 'export' (pure static HTML, no running server at
all), the revalidate route can't work, there's no live server to call. For
that case, pull all your schema down once per build instead:
- Set
AISCHEMAGEN_PUBLISH_TOKENand add"prebuild": "aischemagen-nextjs sync"topackage.json, this writes.aischemagen/schema.generated.tson every build (gitignore that folder). - Pass it to each page:
<AISchemaGen publishToken="..." url="..." schemaData={schemaData} />(import schemaData from '../../.aischemagen/schema.generated';). - Optionally set a Deploy Hook URL (Sites → your site → Get Code) from your host (e.g. Vercel → Project Settings → Git → Deploy Hooks), so dashboard changes trigger a fresh build automatically instead of only showing up on your site's next unrelated deploy.