FalconSchoolContent-Driven Next.js 16 Site
A content-driven Next.js 16 marketing website for a Pakistani school, where all copy lives in typed data files so non-developers can update it without touching components.
System architecture
Build spec
- Framework
- Next.js 16 · React 19 · TypeScript
- Styling
- Tailwind CSS v4 via PostCSS
- Pages
- Home · About · Gallery · Contact
- Contact
- nodemailer SMTP · 5 per IP per 15 min
- Deploy
- Vercel
Problem
School websites need frequent copy and gallery updates by non-technical staff, but typical builds hardcode text into components, so every edit needs a developer. There was also a need for a working contact pathway without standing up a backend service.
Approach
A Next.js 16 App Router app on React 19 and Tailwind v4 with Server Components across Home, About, Gallery, and Contact. A centralized content layer exports site config, hero, mission, announcements, and a category-filterable gallery; components read from these exports and never hardcode text. The contact form posts to an API route that sends admin and visitor emails via SMTP with in-memory IP rate limiting and a mailto fallback. The UI is hand-built with Tailwind, Framer Motion, and next/image serving AVIF and WebP.
Impact
School staff update copy and gallery purely by editing typed data files, with no component changes and no CMS dependency. It ships a self-contained contact flow with dual SMTP emails, rate limiting, and a mailto fallback, deployed on Vercel, demonstrating clean content/presentation separation on the latest Next.js and React stack.
Decisions & tradeoffs
Centralized content layer over hardcoded copy
All text is exported from data files so non-technical staff can edit content without React knowledge. Editing is decoupled from development, at the cost of a slightly more abstract component layer.
SMTP API route with a mailto fallback
A serverless API route sends real admin and visitor emails, but a toggle falls back to mailto when SMTP is not configured. The contact form stays functional in every deployment state without a dedicated backend.
Hand-built Tailwind UI, no component library
All UI is built directly with Tailwind v4 rather than a design-system dependency. The bundle stays lean and the design fully bespoke, trading reusable primitives for full control.
System notes
- Fully content-driven: every string lives in data files, components never hardcode text
- Next.js 16 App Router, React 19, Tailwind v4, Server Components throughout, Turbopack dev
- Contact API sends both an admin notification and a visitor confirmation, with in-memory rate limiting
- Icons referenced as strings in data and mapped to components; next/image AVIF and WebP gallery
Stack
Next.js 16 · React 19 · Tailwind v4 · Framer Motion · nodemailer · Vercel