Building Our Admin Dashboard with Next.js
· Alex Hewitt-Procter
Every SaaS company eventually needs an internal admin dashboard. Here's how we built ours.
The Stack
We chose Next.js 14 with the App Router for our admin dashboard. Combined with Tailwind CSS and a dark theme, it gives us a fast, consistent interface for managing the entire ShellApps ecosystem.
Key Features
- Real-time logs — Stream application logs with filtering and search
- Health monitoring — At-a-glance status for all services
- User management — CRUD operations, role assignments, and audit trails
- Queue management — Monitor and manage background job queues
- Blog CMS — Write and publish blog posts with a built-in markdown editor
Design Decisions
We went with a sidebar navigation pattern rather than top-nav. With 10+ sections, a persistent sidebar keeps everything accessible without nested menus.
The dark theme wasn't just aesthetic — it reduces eye strain during those late-night debugging sessions.
Lessons Learned
- SWR for data fetching — The stale-while-revalidate pattern is perfect for dashboards
- Server components by default — Only use client components when you need interactivity
- Tailwind utility classes — Consistency without a design system overhead
The dashboard is now our daily driver for everything from monitoring to content management. It's been a worthwhile investment.