feat: Next.js Support

[christian-bromann]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

As a developer I would like to be able to use Stencil components within Next.js environments and have support for server side rendering.

Describe the Use Case

n/a

Describe Preferred Solution

n/a

Describe Alternatives

n/a

Related Code

n/a

Additional Information

We have started this effort by enabling support for Declarative Shadow DOM in Stencil (see #5792) and rewrote our React Output Target (see ionic-team/stencil-ds-output-targets#432). Once #5792 is merged we will make enhancements to the React output target for enable support for server side rendering in Next.js. If you are interested in this, please subscribe to this issue.

Related issues that we should revisit before shipping:

• bug: Next.js 13 custom server + SSR + Hydration #4389
• bug: Issues with loader file when using React components in NextJS #3811
• bug: import statements from dist-custom-elements getting passed to commonjs and errors in SSR Applications like NextJS. #3176

[christian-bromann]

You can follow the development of this feature in ionic-team/stencil-ds-output-targets#445