How to Fix ‘Document is Not Defined’ Error in Next.js

Causes of the ‘document is not defined’ Error

The `document is not defined` error typically occurs when referencing the client-side only object `document` on the server side. Since Next.js supports server-side rendering by default, this error can arise when attempting to execute client-side code on the server side.

Main Causes

• Server-side rendering environment: The `document` object does not exist on the server side as it is a browser-specific object and can only be used in a browser environment.
• Executing client-only code: This error occurs when trying to run code that should only be executed on the client side in an SSR environment.

Solutions to the Error

Fortunately, the `document is not defined` error can be resolved with a few simple methods. Here are some common solutions:

1. Using useEffect

Use the `useEffect` hook to write code that only runs on the client side. Since `useEffect` is executed after the component is mounted, it does not run on the server side.

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log(document.title);
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

2. Conditional Rendering

Differentiate between server-side and client-side rendering using conditional rendering to prevent accessing the `document` object during server-side rendering.

const MyComponent = () => {
  if (typeof window === 'undefined') {
    return null;
  }
  return <div>{document.title}</div>;
};

export default MyComponent;

3. Using Dynamic Import

Use the `dynamic` function in Next.js to dynamically import components that should only be loaded on the client side.

import dynamic from 'next/dynamic';

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

const Page = () => (
  <div>
    <MyComponent />
  </div>
);

export default Page;

4. Client-side Only Logic

Ensure that specific logic meant to run only on the client side is enclosed within `useEffect` to make it client-specific.

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [someState, setSomeState] = useState(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const someValue = document.getElementById('some-id').textContent;
      setSomeState(someValue);
    }
  }, []);

  return <div>{someState}</div>;
};

export default MyComponent;

Using Node.js LTS Version for Stable Development

Node.js regularly releases new versions, and Long-Term Support (LTS) versions ensure prolonged stability and support. Using the LTS version in your development environment helps reduce unexpected issues, especially important for Next.js applications using server-side rendering.

Conclusion

The `document is not defined` error in Next.js generally occurs when client-only code is executed in a server-side rendering environment. To resolve this, use the `useEffect` hook, conditional rendering, dynamic imports, and ensure client-specific logic is properly handled. Additionally, using the LTS version of Node.js helps maintain stability and compatibility. When working with frameworks like Next.js, always check the latest documentation and compatibility information to prevent issues.

By following these methods, you can effectively resolve the `document is not defined` error and develop stable applications.