Permix

Next Minimal Example

The smallest supported Next.js App Router integration for Permix

Purpose

examples/next-minimal is the smallest official App Router example in this repository. It exists to show the supported baseline without extra framework noise.

It demonstrates:

  • a protected server page with notFound()
  • a protected API route
  • a client-side UI guard
  • a per-mount client Permix instance
  • a tiny role switcher so behavior is easy to verify

Run it

pnpm --filter next-minimal dev

Run the end-to-end tests:

pnpm --filter next-minimal test:e2e

Roles in this example

  • viewer: can read the shell but cannot enter the editor workspace
  • editor: can access the editor page and editor API
  • admin: included as a simple higher-privilege role for extension

Why start here

Start with this example if you want to understand the supported shape before adding caching, multiple roles, Hono, tRPC, or more complex layout guards.

Key files

  • app/page.tsx: current session overview
  • app/editor/page.tsx: server-guarded page
  • app/api/editor-data/route.ts: server-guarded API route
  • components/client-permissions.tsx: client-side UI gating
  • lib/server-permix.ts: request-scoped server snapshot creation

What this example intentionally does not include

  • no external auth provider
  • no database
  • no framework adapter
  • no function-based rules

That keeps the example small enough for onboarding and debugging.