Your Project's Title...

Your project's description...

Next.js rendering layer

This project renders AEM Edge Delivery content through Next.js App Router + React Server Components instead of the native client-side aem.js decoration. EDS remains the headless content/authoring source (Docs/DA, sidekick, .page/.live unchanged); a Cloudflare Worker fronts EDS and renders at the edge. See DEPLOYMENT.md for the full picture.

• Blocks live in /blocks/<name>/: Name.jsx (the React component) + name.js (entry shim)
  • name.css. The registry in lib/registry.js maps block name → component.
• The EDS parse layer is in lib/eds/ (fetch → parse → render).
• Requires Node 18+ (nvm use 22). Run locally with npm run dev; deploy with npm run deploy:cf.

Status: spike — hero, cards, and columns are converted. Other blocks still have their native aem.js decorate functions and render as placeholders until ported.

Environments

• Preview: https://main--{repo}--{owner}.aem.page/
• Live: https://main--{repo}--{owner}.aem.live/

Documentation

Before using the aem-block-collection, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically:

1. Developer Tutorial
2. The Anatomy of a Project
3. Web Performance
4. Markup, Sections, Blocks, and Auto Blocking
5. AEM Block Collection

Installation

npm i

Linting

npm run lint

Local development

1. Create a new repository based on the aem-block-collection template and add a mountpoint in the fstab.yaml
2. Add the AEM Code Sync GitHub App to the repository
3. Install the AEM CLI: npm install -g @adobe/aem-cli
4. Start AEM Proxy: aem up (opens your browser at http://localhost:3000)
5. Open the {repo} directory in your favorite IDE and start coding :)