You are getting this error because document object is not available on the server. Similarly, if you try to use window, localStorage then also it will throw the error. These are only available on client-side(browser).

NextJs serves your pages from the server. So in your case it is trying to get document on the server, but document object is not available on the server. Hence you are getting the error.

To get rid of this error:

You need to specify that such code should be run on browser side rather than on the server.

So for this, you can use typeof document

So your code should be like this:

const dropDownMenu = typeof document !== 'undefined' && document.querySelector('state-select-dropdown-box');

Ref: https://github.com/vercel/next.js/issues/5354#issuecomment-520305040

@Surjeet Bhadauriya answer is technically correct, however next.js provide built in functionality to dynamically load components, in fact with next/dynamic you can load a component withoutSSR.
From the docs :

You may not always want to include a module on server-side. For example, when the module includes a library that only works in the browser.

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}
export default Header

Then in your page (or wherever you import it) :

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/Header'),
  { ssr: false } // <-- not including this component on server-side
)