Example: Next.js App Router

[ericdellacasa8]

Context

Elements claims compatibility with Next.js App Router, but does not currently provide a runnable example developers can clone and experiment with.

A dedicated example would make evaluation easier for developers considering Elements for their own applications.

Definition of Done

Create a complete Next.js App Router example under:

examples/nextjs-app-router/

The example should:

• Run locally with pnpm install && pnpm dev
• Use the Next.js App Router architecture
• Include a route such as app/email-preview/page.tsx
• Render an Elements component tree using renderToHtml()
• Display the rendered output in the browser
• Demonstrate a realistic use case (email preview, newsletter preview, or web page)
• Include a README with setup instructions
• Be linked from the root README

Example Outcome

A developer should be able to:

git clone ...
cd examples/nextjs-app-router
pnpm install
pnpm dev

Visit:

localhost:3000/email-preview

and see an Elements template rendered successfully.

Where to Start

The existing integration test already demonstrates package compatibility:

tests/nextjs-integration/

The goal of this issue is to convert that test setup into a documented, runnable example.

[Cypher-Aura-19]

Hi! I’d like to work on the Next.js App Router example. I plan to create the runnable example under examples/nextjs-app-router, add an email preview route, render a realistic template using renderToHtml(), and include setup documentation. Is this issue available for contribution?

[ericdellacasa8]

Absolutely, the issue is open for contribution and we look forward to seeing what you'll build!