Zenn
🥶

Swiper を Next.js で使用していると Hydration errror が出てしまう

2023/09/07に公開
Next.js
Next.js
React
TypeScript
swiper
tech

はじめに

Next.js : 13.4.3
swiper : 8.4.7
@types/swiper : 6.0.0
react : 18.2.0
react-dom : 18.2.0
typescript : 5.0.4

結論

原因

原因のコード

import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay } from "swiper";
import "swiper/swiper.min.css";

SwiperCore.use([Autoplay]);

import Entry from "../../domain/Entry";

type Props = {
  articles: Entry[];
  className?: string;
};

const ThumbnailCardsSwiper = ({ articles }: Props) => {

  const breakpoints = {
    0: {
      slidesPerView: 2,
      spaceBetween: 25,
    },
    480: {
      slidesPerView: 2,
      spaceBetween: 25,
    },
    768: {
      slidesPerView: 3.5,
      spaceBetween: 20,
    },
    1280: {
      slidesPerView: 6,
      spaceBetween: 20,
    },
  };

  return (
      <Swiper
        breakpoints={breakpoints}
      >
        {articles.map((e, i) => (
          <SwiperSlide key={`${i}`} style={{}}>
          </SwiperSlide>
        ))}
      </Swiper>
  );
};

export default ThumbnailCardsSwiper;

原因は何か

breakpoints={breakpoints} <-- これです

breakpoints で slidePerview の数を指定しています。
おそらく、SSRする時の数が指定されていないため、うまくいかない？だと思います。

解決策

...
  return (
      <Swiper
        breakpoints={breakpoints}
	slidesPerView={"auto"}  <-- これを追加する
      >
        {articles.map((e, i) => (
          <SwiperSlide key={`${i}`} style={{}}>
          </SwiperSlide>
        ))}
      </Swiper>
  );
...

これだけで治るの！？ swiper のバージョンの問題かと思ったら違う！！　疲れました。

Discussion