How to fix document is not defined with Next.js and JavaScript?

To fix document is not defined with Next.js and JavaScript, we can disable server side rendering for specific components.

For instance, we write

import dynamic from "next/dynamic";

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  );
}

export default Home;

to import the hello component with import and disable server side rendering on it with { ssr: false }.

Then we can use it only in the browser environment.