Next.js Agency Starter

Production-grade agency website template with MDX content and email pipeline

Video Demo

El Problema

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.

La Solución

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.

Características Principales

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

Resultados

90+ Lighthouse performance scores out of the box

Zero database dependencies — file-based MDX content

End-to-end contact form with validation and email delivery

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 any throughout the entire codebase
MDX content management: gray-matter + next-mdx-remote with 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 localStorage persistence
SEO-first: Auto-generated sitemap and robots.txt, structured data, Open Graph and Twitter Card metadata

¿Listo para discutir una solución similar?

Exploremos cómo la automatización con IA puede ayudar a tu negocio.

Agendar una Consulta