import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
      const element = document.getElementById('myElement');
      if (element) {
          element.textContent = 'Hello from the browser!';
      }

  }, []);

  return (
    <div id="myElement">Initial Text</div>
  );
}

export default MyComponent;

import { useEffect } from 'react';

function MyComponent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
      setIsMounted(true);
  }, []);

  if(!isMounted)
    return null;

  const elmt = document.getElementById("someid"); // should work

  return (
    <div id="myElement">Initial Text</div>
  );
}

export default MyComponent;

import { useEffect } from 'react';

function MyComponent() {
  if(typeof document !== undefined) {
    const elmt = document.getElementById("someid"); // should work
  }

  return (
    <div id="myElement">Initial Text</div>
  );
}

export default MyComponent;

const MyComponent = dynamic(() => import('./some/Component'), {
  ssr: false // This line is crucial
});

so I should change page.js and layout.js to page.jsx and layout.jsx?

if(typeof document === undefined)
  return;

 useEffect(() => {
    if(typeof document === undefined)
      return;

    const CONTAINER = document.querySelector(.glow-container-${identifier});
    const CARDS = document.querySelectorAll(.glow-card-${identifier});
    
    // ... more code