Categories
JavaScript Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.