Next Blog CMS Demo
A larger multi-role Next.js demo with local data, impersonation, nested routes, and API guards
Purpose
examples/next-blog-cms is the broad demo application for Permix in Next.js. It simulates a small editorial CMS with nested App Router workspaces and different permission combinations.
It demonstrates:
- multiple concurrent roles merged into one effective ruleset
- server-guarded pages, layouts, and APIs
- nested routes for post overview, comments, review, and publish flows
- adaptive navigation and per-role workspace panels
- impersonation through a debug panel
- local SQLite-backed demo data
Run it
pnpm --filter next-blog-cms devRun the end-to-end tests:
pnpm --filter next-blog-cms test:e2eRoles in this demo
author: can work on authored contentreviewer: can review queued contenteditor: can coordinate editorial worksupport: can access moderation-focused surfacesadmin: can publish and access every protected area
Some seeded users intentionally combine roles so the merged behavior is visible.
Demo features
- a local SQLite database created under
.data/blog-cms.sqlite - seeded posts, comments, users, and session state
- a debug panel for impersonation and version visibility
- protected publish API returning realistic JSON responses
- role-aware sidebar navigation
The demo uses Tailwind and Flowbite styling, but its build is pinned to the stable webpack path because the current Flowbite/PostCSS/Turbopack combination was not stable enough for a reproducible demo in this repository.
Key files
lib/db.ts: local demo database and seeded session statelib/permissions.ts: merged role rulescomponents/debug-panel.tsx: impersonation controls and session diagnosticsapp/posts/[slug]/layout.tsx: nested workspace guardapp/api/posts/[slug]/publish/route.ts: protected API mutation
Why this demo exists
This example is not just for marketing. It is a regression harness for real App Router behavior where role changes, nested layouts, and server/client boundaries can drift apart if the integration is not explicit enough.