Getting `ReferenceError: document is not defined` while deploying Next.js project in Vercel

I am working on a Next JS project and I have deployed it to Vercel and at first it was working totally fine and that's why I did'nt check the website status for long time and just developing it locally and pushing into GitHub. Now suddenly I am checked it and getting this error.

ReferenceError: document is not defined
    at t.exports.r.INSERT (/vercel/path0/.next/server/app/dashboard/create/page.js:1:160188)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:43298)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:125932)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:196459)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at Object.<anonymous> (/vercel/path0/.next/server/app/dashboard/create/page.js:1:239478)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
Error occurred prerendering page "/dashboard/create". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: document is not defined
    at t.exports.r.INSERT (/vercel/path0/.next/server/app/dashboard/create/page.js:1:160188)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:43298)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:125932)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:196459)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at Object.<anonymous> (/vercel/path0/.next/server/app/dashboard/create/page.js:1:239478)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)

I try to read this and found that something is wrong into this directory

/app/dashboard/page.js

i am sure that i did'nt use the doucment on that perticular file. but i use the doucment in the Navbar.jsx file. here is the code

const [toggle_icon, set_toggle_icon] = useState(faBarsStaggered);

useEffect(() => {
        if (toggle_icon == faBarsStaggered) {
            menuRef.current.style.left = "-110%"
            document.body.style.overflowY = 'scroll'
        } else {
            menuRef.current.style.left = "0"
            document.body.style.overflowY = 'hidden'
        }
    }, [toggle_icon])

i use that code to set the body overflow-y hidden when the menu is opend. now i don't know what is causing the error. please help me with that. if you need anything else to know more about the error please let me know.

Edit

I remove all the code that can cause the error (localstorage, window, document) and add the use client to all componenet that can cause the error. I also tried to delete all cache in vercel. And re-deploy it to vercel and i gets the same error.

Now I remove the whole folder /app/dashboard/create and deploy it and now it works.

this is the code i have on that file /app/dashboard/create/page.jsx

'use client'

// pages/create-post.js
import React from 'react';
import AdminForm from '@/components/admin/AdminForm';

export default function CreatePostPage() {
  return (
    <div>
      <h1>Create a New Post</h1>
      <AdminForm />
    </div>
  );
};

and the AdminForm @/components/admin/AdminForm (I use this in /app/dashboard/create/page.jsx file) file contains this code

'use client'

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default function AdminForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  // Handle title change
  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  // Handle content change
  const handleContentChange = (value) => {
    setContent(value);
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    // You can perform actions like saving the title and content to the database here
  };

  return (
    <div>
      {/* Title input field */}
      <input
        type="text"
        value={title}
        onChange={handleTitleChange}
        placeholder="Enter title"
      />

      {/* Text editor for content */}
      <ReactQuill
        theme="snow"
        value={content}
        onChange={handleContentChange}
        placeholder="Enter content"
      />

      {/* Submit button */}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

Solution

ReactQuill in AdminForm seems to call browser specific APIs at import. And knowing that even client components first render on the server, you are getting that error at build time.

A solution is to import the AdminForm with the dynamic function of Next.js, like so:

// pages/create-post.js

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

export default function CreatePostPage() {
  return (
    <div>
      <h1>Create a New Post</h1>
      <AdminForm />
    </div>
  );
};