AEM Headless + Next.js 15 on Vercel — Lighthouse 95+ Performance, Content Live in Seconds

Description

A full walkthrough of the AEM Developer Knowledge Hub — a headless content site built with Adobe Experience Manager Content Fragments, delivered via Next.js 15 App Router on Vercel. Lighthouse scores on the live deployment: Performance 95+ · Accessibility 95+ · Best Practices 100 · SEO 100 WHAT'S COVERED (2:34) 0:06 — Lighthouse scores on the live Vercel deployment 0:25 — Live site: homepage, category filtering, article detail, FAQs 0:55 — AEM authoring side: CF models, field naming conventions, Fragment References 1:35 — Live edit in AEM → ISR revalidation webhook → page updated on Vercel in seconds TECH STACK → AEM SDK Author (local) — 5 CF models, 60+ Content Fragments → AEM GraphQL persisted queries → Next.js 15 App Router with ISR (revalidate on demand via webhook) → Vercel edge deployment The same CF models feed a RAG pipeline in the next phase of this project. LINKS Live demo: https://aem-headless-nextjs.vercel.app GitHub repo: https://github.com/somenssarkar/aem-headless-nextjs