smartive / stencil-nextjs-example

This project shows how we got Stencil Web Components working inside the Next.js app directory.

Next.js App Router Project with Stencil.js Web Components

This project shows how we got Stencil.js Web Components working inside the Next.js app directory.

Big thanks goes out to Wesley Luyten who created WeSC which served as base of ./packages/web-components-react-wrapper. Also we like to thank Mux for there Web Components React build script which helped us to create our Stencil React Wrapper. 🙏

How to run the Next.js app

1. Run npm ci.

2. Run either npm run app:dev or npm run app:start

3. Open http://localhost:3000

   The Web Components from ./packages/web-components are rendered server-side. 🎉

Disclaimer

We use a patched version of Stencil.js because by default Stencil.js does not fallback to globalThis when there is no window available e.g. on the server. A pull request which would add this feature and the corresponding issue was closed by the Stencil.js Team. 😔