【Next.js】react-id-swiperのautoplayやnavigationが動作しない時の対処法

Next.jsでreact-id-swiperを利用した際に、自動再生やページ送りが機能しなかったので、解決方法の共有。

環境

ライブラリ名	バージョン
next	10.0.6
react	17.0.1
react-id-swiper	4.0.0
swiper	6.4.11

自動再生が機能しない問題

公式ドキュメントにある自動再生のサンプルコードは次のようになっているが、これだと機能しなかった。

公式のサンプルコード

import React from 'react';
import Swiper from 'react-id-swiper';
const Autoplay = () => {
  const params = {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  }
  return (
    <Swiper {...params}>
      <div>Slide #1</div>
      <div>Slide #2</div>
      <div>Slide #3</div>
      <div>Slide #4</div>
      <div>Slide #5</div>
    </Swiper>
  )
};
export default Autoplay;

GitHubのissueを確認すると、Gatsbyの例だが解決方法が載っていた。
結論は、autoplayをswiper本体から直接インポートして利用すれば機能する。
参考：https://github.com/kidjp85/react-id-swiper/issues/469

該当コード

import { Autoplay, Swiper as RealSwiper } from "swiper";
RealSwiper.use([Autoplay]);

余談だが、cssのインポート場所も公式とは若干違ったのでついでに載せておく。

import Swiper from "react-id-swiper";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import { Autoplay, Swiper as RealSwiper } from "swiper";
RealSwiper.use([Autoplay]);

ページ送りが機能しない問題

自動再生と同様に、こちらもswiper本体からインポートして利用すればＯＫ。
ページネーションが表示されない問題も同様。

該当コード

import SwiperCore, { Pagination, Navigation } from "swiper";
SwiperCore.use([Pagination, Navigation]);

パラーメータ等はreact-id-swiper公式ドキュメントの通りにセットすればOK
参考：https://github.com/kidjp85/react-id-swiper/issues/453

まとめ

動かないと思ったらswiper本体からインポートすれば基本動く。（Next.jsと書いているがあんまり関係ないと思う）
react-id-swiperの問題なので、バージョンが上がればいずれ解決するはず。