React Class component rendered in a Server Component - Next Js

Why This Error Occurred

You are rendering a React Class Component in a Server Component, React.Component and React.PureComponent only works in Client Components.

Use a Function Component.

jsx

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

jsx

export default function Page() {
  return <p>Hello world</p>
}

Mark the component rendering the React Class Component as a Client Component by adding 'use client' at the top of the file.

jsx

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

jsx

'use client'

export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}