Howto for using Patternfly-elements with NextJS

[andre-lockhart-lab49]

Hi,

Is it possible to use PatternFly-elements with NextJS 11.1?

The sticking point is server side rendering.

We found a workaround. However, it would be better to have SSR support directly in Patternfly-elements.

1. Import the web components, pf-element first
2. Wrap the element in a React component
3. Dynamically import the wrapped Patternfly element with ssr: false

// next.config.js

const withTM = require("next-transpile-modules")([
  "@patternfly/pfelement/dist/pfelement.js",
  "@patternfly/pfe-card/dist/pfe-card.js",
]);

const nextOps = {
  reactStrictMode: true,
};

module.exports = withTM(nextOps);

// Test.js

import "@patternfly/pfe-card/dist/pfe-card.js";

const Test = () => {
  return (
    <div>
      <pfe-card>test?</pfe-card>
    </div>
  )
}

export default Test;

// ConsumingPage.js

import dynamic from "next/dynamic";

import styles from "../styles/Home.module.css";

const Test = dynamic(() => import("../components/Test"), {
  ssr: false,
});

// the rest of the component...`