Using breakpoints option in Next JS causes Hydration error

[Sakkhor909]

First of all, thank you for this amazing library.

Everything works fine until I use breakpoints

import { Swiper, SwiperSlide } from "swiper/react";
import {
  Navigation,
  Pagination,
  EffectCoverflow,
  Keyboard,
  Mousewheel,
} from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-coverflow";
import Image from "next/image";
 <Swiper
        effect={"coverflow"}
        navigation={true}
        slidesPerView={1}
        centeredSlides={true}
        spaceBetween={50}
        grabCursor={true}
        loop={true}
        pagination={{
          dynamicBullets: true,
          clickable: true,
        }}
        keyboard={{
          enabled: true,
        }}
        mousewheel={true}
        coverflowEffect={{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }}
        breakpoints={{
          1024: {
            slidesPerView: 3,
          },
        }}
        modules={[
          Navigation,
          Pagination,
          EffectCoverflow,
          Keyboard,
          Mousewheel,
        ]}
        className="mySwiper"
      >
        {Data.images.map((imgSrc, index) => {
          return (
            <SwiperSlide>
              <Image src={imgSrc} alt={Data.name + index} layout="fill" />
            </SwiperSlide>
          );
        })}
      </Swiper>

The error is shown on the next js page

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

How to fix this error?

[jordanlambrecht]

Also experiencing this problem.

[Sakkhor909]

Read this issue, you may find a solution #5784