Next.js Agency Starter
Production-grade agency website template with MDX content and email pipeline
Demo Video
The Problem
Most web starter templates are either over-engineered with opinionated abstractions or under-built with missing production essentials. Agency developers waste time rebuilding the same infrastructure — forms, content management, SEO, dark mode — for every client project.
The Solution
A production-grade Next.js starter that ships with a unified UI system, MDX-powered blog and case study content, and a complete contact form pipeline with Zod validation and Resend email delivery. Clone it, customize the brand, and ship — no placeholders, no TODOs.
Key Features
- Cohesive UI system with layout primitives (Container, Section, Stack) and reusable components
- MDX content workflow for blogs and case studies — drop in a file, no CMS or database needed
- Production contact pipeline: React Hook Form + Zod validation + Server Actions + Resend email
- SEO-first: auto-generated sitemap/robots.txt, structured data, Open Graph, Twitter Cards
- Dark mode with localStorage persistence, WCAG AA accessibility, 90+ Lighthouse scores
Results
Overview
Next.js Agency Starter is a production-grade template for building agency, marketing, and portfolio websites. It ships with a unified UI component system, an MDX-powered content workflow, and a complete contact form pipeline with email delivery via Resend.
The project serves a dual purpose: it functions as a portfolio piece demonstrating modern frontend architecture patterns, and as a practical starter that can be cloned directly into client projects. Everything works end-to-end in production — no placeholders, no TODOs, no leftover wiring.
Built on Next.js 14 App Router with TypeScript strict mode and Tailwind CSS, the starter targets developers who build client sites regularly and want a consistent, high-quality foundation to work from.
The Challenge
- Over-engineered starters: Many Next.js templates come loaded with opinionated state management and deeply nested hierarchies that fight customization.
- Under-built starters: A styled landing page with no content layer, no working forms, no SEO setup, and TODO comments where production concerns should be.
- Repetitive infrastructure: Agency developers rebuild the same patterns for every client: contact forms, content management, dark mode, SEO metadata.
The Solution
Cohesive UI system: Layout primitives (Container, Section, Stack) and reusable components (Button, Card, Badge, Link, Input) provide a unified design language with the cn() utility for clean conditional class composition.
MDX content layer: Blog posts and case studies are .mdx files with structured frontmatter. Content utilities handle loading, sorting, and draft filtering. Adding content means dropping in a file — no CMS, no database.
Production contact pipeline: Client-side validation with React Hook Form and Zod, server-side validation with Next.js Server Actions, and email delivery via Resend with React Email templates.
Technical Highlights
- App Router architecture: File-based routing with dynamic
[slug]routes, per-page metadata exports, server components by default - TypeScript strict mode: No implicit
anythroughout the entire codebase - MDX content management:
gray-matter+next-mdx-remotewith structured frontmatter schemas - Form infrastructure: React Hook Form + Zod for client/server validation, Server Actions, and Resend delivery
- Theming system: CSS custom properties for brand colors, class-based dark mode with
localStoragepersistence - SEO-first: Auto-generated sitemap and robots.txt, structured data, Open Graph and Twitter Card metadata
Ready to discuss a similar solution?
Let's explore how AI automation can help your business.
Schedule a Consultation