> ## Documentation Index > Fetch the complete documentation index at: https://docs.instantschema.app/llms.txt > Use this file to discover all available pages before exploring further. # Next.js SDK > Server-render InstantSchema structured data in Next.js App Router # Next.js SDK The `@instantschema/sdk` package provides a `` Server Component that fetches schemas and renders them into the HTML `` before any JavaScript runs — giving you full SEO fidelity with no client-side requests. ## Prerequisites * Next.js 14+ (App Router) * React 18+ ## Install ```bash theme={null} npm install @instantschema/sdk ``` ## Setup ### 1. Add the pathname middleware Create `middleware.ts` at your project root. This exposes the current pathname to Server Components via a request header: ```ts theme={null} import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; export function middleware(req: NextRequest) { const headers = new Headers(req.headers); headers.set("x-pathname", req.nextUrl.pathname); return NextResponse.next({ request: { headers } }); } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], }; ``` ### 2. Add `` to your root layout ```tsx theme={null} // app/layout.tsx import { InstantSchemaHead } from "@instantschema/sdk/next"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Replace `YOUR_PROJECT_ID` with the Project ID from your [InstantSchema dashboard](https://app.instantschema.com). ## How it works `` is an async Server Component. On each request it: 1. Reads the `x-pathname` header set by the middleware 2. Fetches schemas from the InstantSchema API for that pathname 3. Renders them as `