Schema guides Platform
How to add schema to Next.js
Category: framework
Plugins and apps
- next-seo
- Manual next/script or layout head
Manual implementation
App Router: layout.tsx or page.tsx with `<script type="application/ld+json">` built server-side; Pages Router: `_document` or per-page Head.
Troubleshooting
- Hydration mismatch in head
Serialize JSON-LD on the server only; avoid random IDs in client components. - Duplicate graphs
Lift JSON-LD to root layout or remove duplicate page-level scripts.
Overview
Next.js should emit JSON-LD on the server for the HTML crawlers receive. In the App Router, colocate schema with the route segment that owns the data (e.g. product loader).
Use JSON.stringify of a plain object; avoid injecting user HTML. SEWWA generates starter graphs you can paste into server components.