"Hydration failed because the initial UI does not match......" error showing when I m nesting multiple div inside next Link tag

Question

React 18: Hydration failed because the initial UI does not match what was rendered on the server error showing when I am nesting multiple div in a Link tag

my code is given below:-

<Link href={'/product/wearcode'}>
            <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
              <a className="block relative rounded overflow-hidden">
                <img
                  alt="ecommerce"
                  className="m-auto h-[30vh] md:h-[36vh] block"
                  src="https://m.media-amazon.com/images/I/51QK16k7I6L._UL1000_.jpg"
                />
              </a>
              <div className="mt-4 text-center">
                <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
                  T-Shirts
                </h3>
                <h2 className="text-gray-900 title-font text-lg font-medium">
                  Wear The Code
                </h2>
                <p className="mt-1">₹216</p>
                <p className="mt-1">S, M, L, XL, XXL</p>
              </div>
            </div>
            </Link>

<Link href={'/product/wearcode'}>
            <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
              <a className="block relative rounded overflow-hidden">
                <img
                  alt="ecommerce"
                  className="m-auto h-[30vh] md:h-[36vh] block"
                  src="https://m.media-amazon.com/images/I/51QK16k7I6L._UL1000_.jpg"
                />
              </a>
              <div className="mt-4 text-center">
                <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
                  T-Shirts
                </h3>
                <h2 className="text-gray-900 title-font text-lg font-medium">
                  Wear The Code
                </h2>
                <p className="mt-1">₹216</p>
                <p className="mt-1">S, M, L, XL, XXL</p>
              </div>
            </div>
            </Link>

I want use this whole div as link so any client click on the image or text will go to the given page

Answer 1

This solution worked for me:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === 'undefined') {
    return <></>;
  } else {
    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}