This is a proof of concept, covering the following topics:
- webcomponent that renders React components in webcomponents Shadow DOM
- SSR and client side rehydration
- Exposing the code fragments for the widget to work from the public folder of ./components-app/public, by using a webpack plugin that builds and bundles necessary dependencies and code only
- Sharing the components between Next.js apps (and probably other apps) using import via URL (e.g.
import MyComponent from 'https://example.com/my-component.js;)
Using components from a Next.js application in another web application is a common use case. The code in this repository got you covered. Example: This Twitch followers widget is a separate website: My Twitch follower goal. If you want to embed it, into your website you will end up with an iframe solution. The demonstration in this repository, shows you how to implement something similar from your own Next.js application, but as a webcomponent that wraps existing React components and all that in SEO-friendly manner, because SSR is possible with that approach.
I used those posts, docs and implementations as a starting point and mixed it up, that it covers the requirements mentioned above:
- Web Components in Server-Side Rendered (SSR) and Static-Site Generated (SSG) in Next.js Applications
- Exposing and importing components via URL: NextJS URL Import React Component
- Enhancing Next.js webpack to expose widgets containing necessary JS, styles and assets only: Next-widget
- Wrapping React Components Inside Custom Elements
- Using CSS files (e.g. from Next.js build) in WebComponents
- Next.js docs
- React docs