OpenPolicy with Next.js

Drop legal pages into your Next.js App Router or Pages Router without leaving your codebase.

Install

bun add @openpolicy/sdk @openpolicy/react

Define your policy

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

export const privacyPolicy = definePrivacyPolicy({
  company: { name: "Acme Inc.", website: "https://acme.com" },
  contact: { email: "privacy@acme.com" },
  compliance: { gdpr: true, ccpa: true },
});

Render in a Server Component

// app/privacy-policy/page.tsx
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/react";
import { privacyPolicy } from "@/lib/openpolicy";

export const metadata = {
  title: "Privacy Policy — Acme",
};

export default function PrivacyPolicyPage() {
  return (
    <main className="max-w-3xl mx-auto px-4 py-16">
      <OpenPolicy config={privacyPolicy}>
        <PrivacyPolicy />
      </OpenPolicy>
    </main>
  );
}

Why OpenPolicy for Next.js

• Server Component ready — renders at build time with zero client JS for the policy content
• Metadata colocated — keep export const metadata next to your policy config
• Diff-friendly — policy changes appear in PRs alongside the code that caused them
• No third-party iframes — your policy lives in your own domain, your own markup