Is React Slick compatible with Next.js?

Question

I'm working on a project where I need to use React Slick, a popular carousel/slider library for React. I'm also using Next.js for server-side rendering and routing. I'm wondering if React Slick is compatible with Next.js, and if there are any potential issues or best practices I should be aware of when using these two technologies together.

Has anyone successfully integrated React Slick with Next.js, and if so, could you share any tips or recommendations? Any insights on how to efficiently handle the initialization and rendering of React Slick within a Next.js application would be greatly appreciated. Thanks in advance!

Answer 1

Yes. I'm using nextJs version 13.5.5, react slick version 0.29.0 , and typescript. This is the example code :

"use client"
//use client if you using App router, because react-slick is client components

import Image from "next/image"
import Slider from "react-slick"
import Hero from "@/public/hero.jpg"
import s1 from "@/public/s1.jpg"
import s2 from "@/public/s2.jpg"
import s3 from "@/public/s3.jpg"
import {
  ChevronLeft,
  ChevronRight,
} from "lucide-react"

type ImageSlide = {
  alt: string
  image: any
}

//dummy data
const dataImageSlide: ImageSlide[] = [
  {
    alt: "foto sekolah sman 1 mandirancan",
    image: Hero,
  },
  {
    alt: "kendaraan sekolah",
    image: s1,
  },
  {
    alt: "taman bunga sakura di sman 1 mandirancan",
    image: s2,
  },
  {
    alt: "trafic jalan dekat sman 1 mandirancan",
    image: s3,
  },
]

const HeroContent = () => {

  const settings = {
    autoplaySpeed: 3500,
    fade: true,
    autoplay: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    pauseOnHover: false,
    pauseOnFocus: false,
    prevArrow: <Prev />,
    nextArrow: <Next />,
  }
//

  return (
    <div className="relative">
      <Slider {...settings}>
        {dataImageSlide?.map((hero) => (
          <div
            key={hero.alt}
            className="w-full h-[240px] md:h-[350px] lg:h-[500px] overflow-hidden relative"
          >
            <Image
              className="w-full h-full object-cover object-center"
              src={hero.image}
              alt={hero.alt}
            />
          </div>
        ))}
      </Slider>
    </div>
  )
}

export default HeroContent


const Prev = (props: any) => {
  const { onClick } = props
//This onClick prop is native to React Slick 
  return (
    <button
      onClick={onClick}
      className={`w-fit top-1/2 opacity-0 lg:opacity-100 text-primary flex items-center justify-center rounded-full bg-background/20 hover:bg-background/30 p-1 shadow-md absolute z-10 left-5`}
    >
      <ChevronLeft width={40} height={40} color="white" strokeWidth={2} />
    </button>
  )
}

const Next = (props: any) => {
  const { onClick } = props
//This onClick prop is native to React Slick 
  return (
    <button
      onClick={onClick}
      className={`w-fit top-1/2 opacity-0 lg:opacity-100 text-primary flex items-center justify-center rounded-full bg-background/20 hover:bg-background/30 p-1 shadow-md absolute z-10 right-5`}
    >
      <ChevronRight width={40} height={40} color="white" strokeWidth={2} />
    </button>
  )
}