はじめに

Next.js/Typescriptで構築した静的なLPにカルーセルのライブラリ（Swiper:v9.1.1）を導入して実装する事になりました。
Next.js(v13.2.4)に初めてライブラリを導入するのは初めてで、少し詰んだので備忘録として記事にする事にしました。

Swiperのインストール

npm install swiper

CSSのインポート

カルーセルに必要なcssをインポートします。
今回LPなのでapp/page.tsxに追加しました。
ナビゲーションも付けたいのでnavigationもインポートしています。

import 'swiper/css'
import 'swiper/css/bundle'
import 'swiper/css/navigation'

カルーセルを作成

カルーセルに必要なタグをインポートします

import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation } from 'swiper'
SwiperCore.use([Navigation])

// カルーセル用の画像
const images = [
    `/sample.jpg`,
    `/sample.jpg`,
    `/sample.jpg`,
]
const Home = () => {
    return (
        <>
            <Swiper
                // スライドの表示枚数
                slidesPerView={1}
                // 前後の矢印
                navigation
                className="mySwiper"
                loop={true}
            >
            {images.map((src: string, index: number) => {
                return (
                    <SwiperSlide key={`${index}`}>
                        <Image
                            src={src}
                            width={640}
                            height={480}
                            alt='sample'
                            className='text-c'
                        />
                    </SwiperSlide>
                )
             })}
            </Swiper>
        </>
)}

export default Home

エラーが発生しました

動作確認をしたところ、swiperのライブラリのファイルでReactServerComponentsErrorが発生していました。
エラーを調べたところ、Next.jsのversion13以降からコンポーネントはデフォルトでサーバーコンポーネントになっているようです。
ですので、クライアントでコンポーネントを使用する場合は明示的にクライアントで使用する'use client'の記述が必要です。

サーバーおよびクライアントコンポーネント
https://beta.nextjs.org/docs/rendering/server-and-client-components

今回はapp/page.tsxの先頭に'use client'を追加するとカルーセルが表示されて、カルーセルが動くようになりました。

参考サイト