Consulting · Axis Consultancy
Problem
A consultancy website stops working as a sales asset the moment every text change needs a developer. Axis Consultancy needed a site its own team could publish from: service pages, articles, contact forms and SEO settings, all editable in an admin panel, with drafts and previews before anything goes live.
My scope
One Next.js application that serves both the public website and the Payload admin panel: the collections and globals, the page-building blocks, the form handling, the plugin setup and the frontend templates.
System architecture
Payload CMS 3 runs embedded in a Next.js 16 App Router application backed by PostgreSQL. Content lives in collections (Pages, Posts, Media, Categories, Users) with Header and Footer managed as globals. Pages are assembled from reusable layout blocks and hero variants, written in the Lexical rich-text editor. Draft versions with live preview let editors see a page exactly as visitors will before publishing, scheduled publishing runs through Payload's jobs queue, and collection hooks revalidate the frontend on demand when content changes. The form builder plugin handles contact forms, while the SEO, search and redirects plugins cover metadata, site search and URL migrations.
Key decisions
- CMS and site in one deployable. Payload runs inside the Next.js app, so there is one codebase and one deployment - no separate API to host, secure and keep in sync.
- Blocks over bespoke templates. Editors compose new pages from tested layout blocks instead of waiting on a developer for every new layout.
- Preview before publish. Drafts, live preview and scheduled publishing make the editorial workflow safe for a non-technical team.
Stack
- Frontend - Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, shadcn/ui
- CMS - Payload 3 with Lexical editor, form builder, SEO, search and redirects plugins
- Data - PostgreSQL via the Payload Postgres adapter
- Testing - Vitest integration tests and Playwright end-to-end tests