disable SSR on a component

NoSsr.tsx

import dynamic from 'next/dynamic'
import React from 'react'

const NoSsr = props => (
    <React.Fragment>{props.children}</React.Fragment>
)

export default dynamic(() => Promise.resolve(NoSsr), {
    ssr: false
})

how to use:

<NoSsr>
  <div className="w-full h-full flex flex-col items-center justify-center py-4">
    No SSR here
  </div>
</NoSsr>;