i have hydration error in nextj13.4 when use antd v.5 and check roles with below code

Question

Unhandled Runtime Error

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

Warning: Expected server HTML to contain a matching

in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

in /dashboard/news route

'use client';
import React, { useEffect, useState } from 'react';
import NewsComponent from '@/app/components/news/NewsComponent';
import { withRoles } from '@/app/libs/permissions/pagesPermissions';

const NewsListPage = () => {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) {
    return null;
  }
  return (
    <>
      <title>اخبار</title>
      <div className={'font-IRANSansXV sm:mx-4 overflow-auto h-[89vh] '}>
        <div className={'flex justify-between items-center'}>
          {/* ----------------- */}
          {/* ----- title ----- */}
          {/* ----------------- */}
          <h1 className={'font-bold text-lg mt-6 mb-10 px-6 md:mb-6'}>اخبار</h1>
        </div>
        {/* -------------------------- */}
        {/* ----- news component ----- */}
        {/* -------------------------- */}
        <NewsComponent />
      </div>
    </>
  );
};

const NewsListPageWithRoles = withRoles(NewsListPage, ['NewsAdmin']);
export default NewsListPageWithRoles;

export const hasPermissionForRoles = (
  requiredRoles: string[],
  userRoles: string[],
): boolean => {
  return requiredRoles.some((requiredRole) => userRoles.includes(requiredRole));
};

interface WithRolesWrapperProps {
  // Define any additional props your wrapper might need
}

export function withRoles<P>(
  Component: React.ComponentType<P>,
  requiredPermissions: string[],
) {
  const WithRolesWrapper: React.FC<WithRolesWrapperProps & P> = (props) => {
    const [mounted, setMounted] = useState(false);
    const { user } = useStore((state) => state);
    useEffect(() => {
      setMounted(true);
    }, []);

    if (!mounted) {
      return null;
    }

    const userPermissions = user?.roles;
    const hasPermission = hasRequiredPermissions(
      userPermissions,
      requiredPermissions,
    );
    if (hasPermission) {
      return <Component {...props} />;
    } else {
      return <InaccessibilityComponent />;
    }
  };

  return WithRolesWrapper;
}

the nextjs13.4 when use antd v.5 i have this error and i want use permisson in this role

Answer 1

I add this code in RootLayout and it resolved this problem:

const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; }