Skip to content

feat(examples): add interactive Next.js App Router example - #53

Open
Cypher-Aura-19 wants to merge 2 commits into
unlayer:mainfrom
Cypher-Aura-19:feat/nextjs-app-router-example
Open

feat(examples): add interactive Next.js App Router example#53
Cypher-Aura-19 wants to merge 2 commits into
unlayer:mainfrom
Cypher-Aura-19:feat/nextjs-app-router-example

Conversation

@Cypher-Aura-19

Copy link
Copy Markdown

Summary

Closes #21.

Adds a focused Next.js 15 App Router example demonstrating server-side rendering of an Unlayer Elements email template using renderToHtml() and renderToPlainText().

Changes

  • Adds a realistic welcome email template built with @unlayer/react-elements.
  • Renders HTML and plain-text output exclusively on the server.
  • Adds an interactive preview with HTML, source and plain-text tabs.
  • Adds desktop and mobile viewport controls.
  • Adds dependency-free clipboard actions.
  • Provides /email-preview/raw for accessing the rendered HTML directly.
  • Includes complete setup and local package-development instructions.
  • Links the example from the root README.

Workspace compatibility

The example is isolated from the root workspace to prevent React 19 dependencies from affecting the repository’s React 18 packages. It consumes the published package like a normal external Next.js application.

The example README also explains how to test local package changes using a packed tarball.

Verification

  • pnpm install in the example: passed
  • pnpm build in the example: passed
  • pnpm dev: verified
  • /: returns 200
  • /email-preview: returns 200
  • /email-preview/raw: returns 200 with text/html; charset=utf-8
  • Root pnpm build: passed
  • Root tests: 538 tests passed

@ivoIturrieta ivoIturrieta left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this example. The production build and all routes work correctly, but I found a few issues to address before merging:

  1. The example pins next@15.5.3, which has a critical React Flight RCE and several high-severity vulnerabilities. pnpm audit --prod currently reports 33 vulnerabilities. Please upgrade to at least next@15.5.21, regenerate the lockfile, and rerun the audit.

  2. Running next build inside the example still causes Next.js to select the monorepo root because it detects both lockfiles. The build emits a workspace-root warning, and the output trace references the repository-root package.json. Please set outputFileTracingRoot to the example directory in next.config.ts.

  3. The root .gitignore now ignores every __snapshots__/ directory in the monorepo. This seems unrelated to the example and could silently hide committed test snapshots. Please remove it or scope it narrowly to the example.

- Upgrade Next.js from 15.5.3 to 15.5.22 (fixes 33 audit vulnerabilities)
- Add pnpm overrides for postcss>=8.5.18 and sharp>=0.35.0 to clear remaining transitive vulnerabilities
- Set outputFileTracingRoot to __dirname in next.config.ts to prevent workspace-root tracing warning
- .gitignore: no __snapshots__/ rule exists in the PR diff, left unchanged

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@Cypher-Aura-19

Copy link
Copy Markdown
Author

Thanks for the review. I’ve pushed ec69618 addressing the requested changes:

  • Upgraded the example from next@15.5.3 to next@15.5.22.
  • Regenerated the example lockfile.
  • Added outputFileTracingRoot: __dirname in the example next.config.ts.
  • Confirmed the example build no longer emits the workspace-root warning.
  • Ran pnpm audit --prod in the example and it now reports 0 vulnerabilities.

Verification:

  • pnpm install in the example passed
  • pnpm audit --prod in the example passed with 0 vulnerabilities
  • pnpm build in the example passed
  • root pnpm build passed
  • root pnpm test passed: 538 tests

For the .gitignore note: I checked the current PR diff against main, and this branch does not add a __snapshots__/ rule to the root or package .gitignore files. That may have applied to an earlier branch state, so I left .gitignore unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Example: Next.js App Router

2 participants