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

[mertkesimliileri]

`

 const Carousel = () => {

const handleDragStart = (e) => e.preventDefault();

const responsive = {
    0: { items: 1 },
    568: { items: 2 },
    1024: { items: 4 },
};

const items = [
    <CarouselCard title="Development" text="At lacus vitae nulla sagittis scelerisque nisl. Pellentesque duis cursus vestibulum, facilisi ac, sed faucibus." onDragStart={handleDragStart} />,
    <CarouselCard title="Development" text="At lacus vitae nulla sagittis scelerisque nisl. Pellentesque duis cursus vestibulum, facilisi ac, sed faucibus." onDragStart={handleDragStart} />,
    <CarouselCard title="Development" text="At lacus vitae nulla sagittis scelerisque nisl. Pellentesque duis cursus vestibulum, facilisi ac, sed faucibus." onDragStart={handleDragStart} />,
    <CarouselCard title="Development" text="At lacus vitae nulla sagittis scelerisque nisl. Pellentesque duis cursus vestibulum, facilisi ac, sed faucibus." onDragStart={handleDragStart} />,
];

return (
    <div className={styles.carousel}>
        <h1 className={styles.header}>Ready to make digital your superpower? </h1>
        <AliceCarousel mouseTracking items={items} responsive={responsive} />
    </div>
)
}

`

I am using alice-carousel with react next.js. react version is "react": "18.2.0". I get hydration failed error on runtime.

[maxmarinich]

Hi, @mertkesimliileri! Please, use innerWidth prop to resolve it, see SSR issues. The best one is #210