https://github.com/smartive/stencil-nextjs-example
This project shows how we got Stencil Web Components working inside the Next.js app directory.
https://github.com/smartive/stencil-nextjs-example
Last synced: about 1 year ago
JSON representation
This project shows how we got Stencil Web Components working inside the Next.js app directory.
- Host: GitHub
- URL: https://github.com/smartive/stencil-nextjs-example
- Owner: smartive
- License: isc
- Archived: true
- Created: 2023-10-13T07:02:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-27T05:02:53.000Z (over 1 year ago)
- Last Synced: 2025-04-05T18:12:35.574Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://stencil-nextjs-example-app.vercel.app
- Size: 2.15 MB
- Stars: 6
- Watchers: 6
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/smartive/stencil-nextjs-example/tree/main/packages/stencil-react-ssr-output-target).
**Live Demo**: [stencil-nextjs-example-app.vercel.app](https://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](http://localhost:3000)
> [!TIP]
> Disable JavaScript and reload the page to see the difference between the rendered components.