@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.

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_schema tool via the AI Schema Gen MCP server

Install

npm install @aischemagen/nextjs

Setup

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. 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).

3. 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.

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, read-only, single-site credential (the same idea as a Stripe publishable key), safe to store as a plain environment variable. It can only fetch schema already generated for that one site, and can only trigger a refresh of that site's own already-known pages, it can't generate new schema, 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:

1. Set AISCHEMAGEN_PUBLISH_TOKEN and add "prebuild": "aischemagen-nextjs sync" to package.json, this writes .aischemagen/schema.generated.ts on every build (gitignore that folder).
2. Pass it to each page: <AISchemaGen publishToken="..." url="..." schemaData={schemaData} /> (import schemaData from '../../.aischemagen/schema.generated';).
3. 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.