Next.jsでreact carouselを使う方法

https://github.com/brainhubeu/react-carousel でreact carouselというのがあるのですが、こちらはSSGやSSRを使うNext.jsではそのままでは使えません。

そこで、next.jsでも使えるようにする手順を説明します。

React carouselのインストール

こちらはnext.jsでもreactでも変わりません。

yarn add @brainhubeu/react-carousel

React Carouselのセットアップ

次にimportですが、これを公式のドキュメント通りに下記のようにすると、 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

のようなエラーが起きてしまいます。

// これだと動かない
import dynamic from 'next/dynamic';

const { default: Carousel, Dots } = dynamic(
 () => require('@brainhubeu/react-carousel'),
 { ssr: false },
);

そこで、下記のように使ってimportして使ってあげると無事に動きます。また、全体の使い方は以下のようになります。

// 動くバージョン
import dynamic from 'next/dynamic';
import '@brainhubeu/react-carousel/lib/style.css';

const Carousel = dynamic(() => import('@brainhubeu/react-carousel'), {
  ssr: false,
});

const Home = () => {
  return (
    <Carousel plugins={['arrows']}>
      <img src="https://images.unsplash.com/photo-1612565191576-7ac513f0fc00?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
      <img src="https://images.unsplash.com/photo-1622367037544-fbf8987e2e07?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
    </Carousel>
  )
}

export default Home

これで、無事にカルーセルを使えるようになります。

参考：react-carousel next.js

おまけ

また、CarouselでDotsを使ってもっと見た目をよくするためには、下記のようにするとうまく動きます。

import dynamic from 'next/dynamic';
import '@brainhubeu/react-carousel/lib/style.css';
const Carousel = dynamic(() => import('@brainhubeu/react-carousel'), {
  ssr: false,
});
import { Dots } from '@brainhubeu/react-carousel';
import { useState } from 'react';

const Home = () => {
  const [value, setValue] = useState(0);
  return (
    <>
    <Carousel plugins={['arrows']} value={value} onChange={(value) => setValue(value)}>
      <img src="https://images.unsplash.com/photo-1612565191576-7ac513f0fc00?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
      <img src="https://images.unsplash.com/photo-1622367037544-fbf8987e2e07?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
    </Carousel>

    <Dots
      value={value}
      onChange={(value) => setValue(value)}
      thumbnails={[
        (<img key={1} className="img-example-small" src="https://images.unsplash.com/photo-1612565191576-7ac513f0fc00?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />),
        (<img key={2} className="img-example-small" src="https://images.unsplash.com/photo-1622367037544-fbf8987e2e07?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />),
      ]}
      />
    </>
  )
}

export default Home