Sling Academy
Home/Next.js/Next.js: 2 ways to fix the ‘document is not defined’ error

Next.js: 2 ways to fix the ‘document is not defined’ error

Last updated: January 09, 2023

When working with Next.js, you might encounter the document is not defined error. This article will explain why this error happens, then walk you through a couple of different ways to get rid of it.

The Cause of the Error

Next.js supports both server-side rendering and client-side rendering.

The document object is only available on the client side. Therefore, if you accidentally use it in server-side pages or components, you will inevitably run into the document is not defined error:

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Screenshot:

Sometimes, the error does not originate from your code but from a third-party library that uses the document object.

Solutions

Now that we have discussed the reasons why you might get the error, let’s talk about how to fix it. What we have to do is to ensure that we only use the document object on the client side.

Adding a check

You will be safe by checking if the document object exists before using it, like so:

if(typeof document !== 'undefined') {
    // you are safe to use the "document" object here
    console.log(document.location.href);
}

Using the useEffect hook

The useEffect will make sure that you will never get the document is not defined error:

useEffect(() => {
    // you are safe to use the 'document' object here
    document.title = 'Sling Academy';
}, []);

Conclusion

In this article, we discussed the reasons why you might get the document is not defined error, as well as how to fix it. The solutions are quite short and simple. Good luck and happy coding!

Next Article: Next.js Issue: useEffect Hook Running Twice in Client

Series: Common Errors in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported