Over the past two weeks, we pushed a major architectural upgrade to NextBlock CMS—an open-source, full-stack CMS unified directly inside Next.js 16 App Router and Supabase. Our core focus has been expanding our native editorial and technical SEO tooling while preserving strict React Server Component rendering and 100/100 Lighthouse performance defaults.
Here is a technical breakdown of what shipped across the monorepo over the last 14 days:
1. Deterministic Real-Time Content Audits (Visual Editor)
Most CMS platforms either rely on heavy third-party plugins that parse messy HTML strings or burn LLM API tokens on every keystroke. We built an in-editor audit panel inside our Tiptap canvas powered by a client-side Abstract Syntax Tree (AST) evaluator:
- 0ms Latency AST Inspection: Audits
editor.getJSON()and text nodes debounced at 300ms locally in the browser with zero UI blocking. - Heading Semantics: Traverses the document tree to enforce a single H1, catch skipped levels (e.g., H2 jumping directly to H4), and flag empty nodes.
- Readability Indexing: Evaluates syllable counts, average sentence lengths, and Flesch Reading Ease scores directly on the client.
- Keyword Balance: Tracks focus keyphrase distribution across document headings, the opening 100 words, and metadata fields without server round-trips.
2. Autonomous Media & Metadata Generation (Vercel AI SDK)
To keep editorial workflows fast without sacrificing accessibility, we integrated autonomous metadata routines into our Cortex AI pipeline:
-
Contextual Image Alt-Text: When media is uploaded or added to a block, a vision-enabled model (via our Bring-Your-Own-Key OpenRouter / Vercel AI SDK setup) analyzes the image URL and surrounding block context. It writes an accessible, SEO-compliant description straight back to the node's PostgreSQL JSONB attributes.
-
Automated Social Cards & Snippets: A single dashboard trigger reads the post JSONB tree and synthesizes length-validated Meta Titles (<60 chars), Meta Descriptions (<160 chars), and OpenGraph card previews.
3. Edge-Executed Redirects & Dynamic Robots Directives
We moved technical crawl directives and route management directly to the edge runtime:
-
Zero-Waterfall Redirects: Added a indexed
cms_redirectsSupabase table. Next.js edge middleware (middleware.ts/proxy.ts) intercepts matching source paths to return instant 301/302 redirects before page rendering begins. -
Dynamic Route Handlers: Built
app/robots.tsalongside our edge-cachedapp/sitemap.tsto dynamically resolve crawler user-agent rules, disallow paths, and tenant sitemaps on demand. -
Admin Management Panel: A dedicated
/cms/settings/seodashboard route with live path validation for redirect rule CRUD.
4. Native Vercel Ecosystem Integrations
These updates join the foundational Next.js 16 architectural features rolled out during our pre-launch milestone:
-
Vercel Visual Editing Studio: Native
@vercel/visual-editingintegration mapped recursively to our JSONB block renderer, passing context URLs back to the dashboard for live click-to-edit capabilities. -
Zero HTML Sanitization Tax: Content persists purely as structured PostgreSQL JSONB data nodes, completely bypassing
dangerouslySetInnerHTMLand heavy runtime sanitizers. -
Zero-Config 1-Click Deployment: A deployment pipeline on Vercel that provisions the Next.js standalone frontend and auto-scaffolds Supabase database schemas and storage without manual environment variable stitching.
Try the Sandbox & Inspect the Code
-
Live Ephemeral Sandbox: https://nextblock.dev
-
GitHub Repository: https://github.com/nextblock-cms/nextblock
-
1-Click Vercel Deploy Guide: https://nextblock.dev/article/how-to-setup-nextblock
We’d love to get feedback from the Vercel community on our edge middleware redirect handling and AST-based editor scoring. If you deploy a test instance or spot any edge cases, please share your thoughts below!
