Hyedration issues with Next.js

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

Solution

From Next.js 13, return jsx once the component is mounted

function Component() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return <></>;
  // write rest of your code
}

Error:

```bash Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of NextUILayout. ````