Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

[BasahRius]

when i try to build i get this Error
Export encountered errors on following paths:
/page: /

[BasahRius]

The short answer is, you most likely didn't add the 'use client' directive in one of the files or have a typo somewhere. Refer to the final codebase and you'll be able to fix it.

The long answer is:

Hi! It's great to hear that you're enjoying the tutorial and the project. The error you're encountering during the NPM build (ReferenceError: document is not defined) is a common issue when working with Next.js due to its server-side rendering (SSR) capabilities.

Here's a breakdown of how you can troubleshoot and potentially resolve this issue:

1. Identify Client-Specific Code

Ensure that any code interacting with browser-specific objects like document, window, or navigator is only executed on the client side. You can do this by checking if the code is running in the browser:

if (typeof window !== 'undefined') {
    // Code that uses 'window' or 'document'
}

2. Use Dynamic Imports with SSR Disabled

If certain components or parts of your code are not compatible with SSR, you can dynamically import them with SSR disabled. This tells Next.js to load these components only on the client side. For example:

import dynamic from 'next/dynamic';

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

3. Check Third-Party Libraries

Sometimes third-party libraries might use window or document without you knowing. If the error message doesn’t directly point to your codebase, check if any library introduced recently or updated might be causing this. If you find such a library, you might need to look for alternatives or update its implementation as described above.

4. Audit Your Codebase

Search your entire project for any usage of document, window, or other browser-specific objects. This might help identify hidden references causing the issue.

5. Use Next.js Custom Error Handling

Next.js provides custom error handling that might help you catch and manage these errors more gracefully. You can use _app.js or _app.tsx for global error handling.

Example Solution

Here's an example of how you might structure a component that needs to interact with document only on the client side:

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [clientSide, setClientSide] = useState(false);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setClientSide(true);
    }
  }, []);

  if (!clientSide) {
    return null;
  }

  // Client-side code that uses 'document'
  return (
    <div>
      {/* Your component code */}
    </div>
  );
};

export default MyComponent;

Next Steps

1. Check the Build Log: Ensure you check the full build log for more hints. Sometimes, additional context in the error message can point you in the right direction.
2. Examine Dependencies: Look into your package.json and see if any dependencies might be causing the issue.
3. Review the Configuration: Make sure your next.config.js is correctly set up and up-to-date.

By following these steps, you should be able to identify and resolve the document is not defined error. If the issue persists, you may need to dive deeper into specific component implementations or consider logging more of the environment details during the build process to trace it better. If you have more specific code snippets or details, feel free to share them for more targeted assistance.

[kubakakauko]

I had the same thing. The code that I posted in #13 fixed it for me.

[mohsn-mirzaei]

Hi,

I have fixed this issue and created a pull request. You can check it out (#14).

Thanks!