Next.js Integration

Serve the schema visualizer from a Next.js App Router API route.

Installation

npm install @picadeck/core @picadeck/nextjs
# Plus your parser of choice, e.g.:
npm install @picadeck/prisma-parser

API

createSchemaHandler(options): (req: NextRequest) => Response

Creates a Next.js App Router route handler that serves the schema visualizer HTML page.

Options:

parser — () => UniversalSchema | Promise<UniversalSchema>
theme — "light" | "dark" (optional)
title — Page title (optional)

Basic Setup

Create a route handler file in your App Router:

app/api/schema/route.ts

import { createSchemaHandler } from "@picadeck/nextjs";
import { parsePrismaFile } from "@picadeck/prisma-parser";

export const GET = createSchemaHandler({
  parser: () => parsePrismaFile("./prisma/schema.prisma"),
  theme: "dark",
  title: "My Next.js App Schema",
});

Visit http://localhost:3000/api/schema to see the visualizer.

With Drizzle

app/api/schema/route.ts

import { createSchemaHandler } from "@picadeck/nextjs";
import { parseDrizzleSchema } from "@picadeck/drizzle-parser";
import * as schema from "@/db/schema";

export const GET = createSchemaHandler({
  parser: () => parseDrizzleSchema(schema, "postgresql"),
});

Development Only

To only expose the visualizer during development, guard the export:

app/api/schema/route.ts

import { createSchemaHandler } from "@picadeck/nextjs";
import { parsePrismaFile } from "@picadeck/prisma-parser";
import { NextResponse } from "next/server";

const handler = createSchemaHandler({
  parser: () => parsePrismaFile("./prisma/schema.prisma"),
});

export const GET =
  process.env.NODE_ENV === "development"
    ? handler
    : () => NextResponse.json({ error: "Not found" }, { status: 404 });

Notes

The handler returns a full HTML response, not JSON. It works as a standalone page.
The parser function is called on each request, so schema changes are reflected immediately during development.
Compatible with Next.js 13+ App Router. Does not support the Pages Router.