diff --git a/src/components/Header/Cart.component.tsx b/src/components/Header/Cart.component.tsx index e8d0ff2b9..f8690540d 100644 --- a/src/components/Header/Cart.component.tsx +++ b/src/components/Header/Cart.component.tsx @@ -50,7 +50,7 @@ const Cart = ({ stickyNav }: ICartProps) => { {productCount && ( {productCount} diff --git a/src/components/Header/Header.component.tsx b/src/components/Header/Header.component.tsx index a85f9b4b6..4c54364ba 100644 --- a/src/components/Header/Header.component.tsx +++ b/src/components/Header/Header.component.tsx @@ -16,7 +16,7 @@ interface IHeaderProps { const Header = ({ title }: IHeaderProps) => ( <> - Next.js webshop with WooCommerce {title} + {`Next.js webshop with WooCommerce ${title}`} { - const [isMobile, setIsMobile] = useState(false); + // Initialize with null to avoid hydration mismatch + const [isMobile, setIsMobile] = useState(null); - useLayoutEffect(() => { - const updateSize = (): void => { + useEffect(() => { + // Skip effect on server side + if (typeof window === 'undefined') return; + + const updateSize = debounce((): void => { setIsMobile(window.innerWidth < 768); - }; - window.addEventListener('resize', debounce(updateSize, 250)); + }, 250); + + // Initial check updateSize(); + window.addEventListener('resize', updateSize); return (): void => window.removeEventListener('resize', updateSize); }, []); - return isMobile; + // Return false during SSR, actual value after hydration + return isMobile ?? false; }; export default useIsMobile;