Next.js

Next.js doesn't use Vite, so the recommended approach is to use the openpolicy generate CLI command to produce policy files and then import them in your pages.

Installation

bun add @openpolicy/sdk
bun add -D @openpolicy/cli

Create your config

// policy.config.ts
import { definePrivacyPolicy } from "@openpolicy/sdk";

export default definePrivacyPolicy({
  effectiveDate: "2026-01-01",
  company: {
    name: "Acme Inc.",
    legalName: "Acme Corporation",
    address: "123 Main St, Springfield, USA",
    contact: "privacy@acme.com",
  },
  dataCollected: {
    "Account Information": ["Name", "Email address"],
    "Usage Data": ["Pages visited", "Browser type", "IP address"],
  },
  legalBasis: "Legitimate interests and consent",
  retention: {
    "Account data": "Until account deletion",
    "Usage logs": "90 days",
  },
  cookies: { essential: true, analytics: false, marketing: false },
  thirdParties: [],
  userRights: ["access", "erasure", "rectification", "portability"],
  jurisdictions: ["us", "eu"],
});

Generate policy files

Add a script to package.json and run it before your build:

{
  "scripts": {
    "generate:policy": "openpolicy generate ./policy.config.ts --format markdown,html --out ./src/policies",
    "build": "bun run generate:policy && next build"
  }
}

bun run generate:policy

This writes src/policies/privacy-policy.md and src/policies/privacy-policy.html.

Render in a page

Using the HTML output

Import the HTML as a raw string and use dangerouslySetInnerHTML:

// app/privacy/page.tsx
import policy from "@/policies/privacy-policy.html?raw";

export default function PrivacyPolicyPage() {
  return (
    <main>
      <div dangerouslySetInnerHTML={{ __html: policy }} />
    </main>
  );
}

Using the Markdown output with a renderer

Install a Markdown renderer such as react-markdown or marked, then import the .md file as a raw string:

// app/privacy/page.tsx
import Markdown from "react-markdown";
import policy from "@/policies/privacy-policy.md?raw";

export default function PrivacyPolicyPage() {
  return (
    <main>
      <Markdown>{policy}</Markdown>
    </main>
  );
}

Using the Markdown output as an MDX page

Copy or symlink the generated .md into your content/ directory and process it with your MDX pipeline (e.g. Contentlayer, next-mdx-remote, or Fumadocs).

Keeping policies in sync

Because the generated files are committed alongside your source, a pre-commit hook or CI step can verify they're up to date:

# In CI: regenerate and fail if the output differs
bun run generate:policy
git diff --exit-code src/policies/

Next.js

On this page