Stencil within Next.js App Router Project

This project demonstrates approaches for integrating Stencil Web Components into a Next.js app directory with the help of our custom Stencil output target plugin.

Live Demo: stencil-nextjs-example-app.vercel.app

Local Setup:

• Install dependencies: npm ci
• Start development server: npm run dev:app
• Start with production build: npm run start:app
• Open browser: http://localhost:3000

Tip

Disable JavaScript and reload the page to see the difference between the rendered components.