I'm using nextjs app router.
And there are a lot of issues here such as clicking any dot throws an error, the dots length doesn't depend on the slides length and the whole carsoual is unstable... please try to not change the style...
'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import dynamic from 'next/dynamic';
import { useEffect } from 'react';

const Slider = dynamic(() => import('react-slick'), { ssr: false });

// Import CSS files only on the client side
const ClientSideStyles = () => {
    useEffect(() => {
        import('slick-carousel/slick/slick.css');
        import('slick-carousel/slick/slick-theme.css');
    }, []);
    return null;
};
const CarouselSlide = ({ image, title, buttonText }) => (
    <div className="relative w-full h-[400px] sm:h-[500px] md:h-[600px]">
        <Image
            src={image}
            alt={title}
            layout="fill"
            objectFit="cover"
            priority
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent">
            <div className="absolute bottom-8 left-6 text-white">
                <h2 className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 max-w-[204px] leading-tight">
                    {title}
                </h2>
                <button className="border border-white px-4 py-2 text-xs sm:text-sm rounded hover:bg-white hover:text-black transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
                    {buttonText}
                </button>
            </div>
        </div>
    </div>
);

const CustomDots = ({ onClick, activeIndex }) => (
    <div className="custom-dots flex items-center gap-1.5 absolute bottom-4 left-6">
        {[...Array(6)].map((_, i) => (
            <button
                key={i}
                onClick={() => onClick(i)}
                className={`w-1 h-1 rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50
          ${i === activeIndex ? 'w-2 h-2 border border-black bg-[rgba(145,124,103,0.2)]' : 'bg-black'}`}
                aria-label={`Go to slide ${i + 1}`}
            />
        ))}
    </div>
);

const Carousel = () => {
    const [activeSlide, setActiveSlide] = useState(0);

    const settings = {
        dots: true,
        appendDots: (dots) => <CustomDots activeIndex={activeSlide}>{dots}</CustomDots>,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        beforeChange: (current, next) => setActiveSlide(next),
        accessibility: true,
        adaptiveHeight: true,
        pauseOnHover: true,
        swipeToSlide: true,
        touchThreshold: 10,
        useCSS: true,
        useTransform: true,
    };

    const slides = [
        {
            image: '/woman.png',
            title: 'Find Our Women Jacket',
            buttonText: 'Discover more',
        },{
            image: '/woman.png',
            title: 'Find Our Women Jacket',
            buttonText: 'Discover more',
        },
        {
            image: '/woman.png',
            title: 'Find Our Women Jacket',
            buttonText: 'Discover more',
        },
        {
            image: '/woman.png',
            title: 'Test',
            buttonText: 'Test',
        },
        // Add more slides here
    ];

    return (
        <>
            <ClientSideStyles />
            <div className="relative overflow-hidden">
                <Slider {...settings}>
                    {slides.map((slide, index) => (
                        <CarouselSlide key={index} {...slide} />
                    ))}
                </Slider>
            </div>
        </>
    );
};

export default Carousel;
Docs of react-slick:

react-slick.neostack.com
API | React Slick
3–4 minutes
accessibility

Type: bool

Default: true

Enable tabbing and arrow key navigation
adaptiveHeight

Type: bool

Default: false

Adjust the slide's height automatically
afterChange

Type: func

Default: Default

Index change callback. `index => ...`
appendDots

Type: func

Default: dots => <ul>{dots}</ul>

Custom dots templates. Works same as customPaging
arrows

Type: bool

Default: true
asNavFor

Type: ref

Default: undefined

provide ref to another slider and sync it with current slider
autoplaySpeed

Type: int

Default: 3000

Delay between each auto scroll (in milliseconds)
autoplay

Type: bool

Default: false
beforeChange

Type: func

Default: null

Index change callback. `(oldIndex, newIndex) => ...`
centerMode

Type: bool

Default: false

Center current slide
centerPadding

Type: string

Default: '50px'
className

Type: string

Default: ''

CSS class for inner slider div
customPaging

Type: func

Default: i => <button>{i + 1}</button>

Custom paging templates. [Example](examples/CustomPaging.js)
dotsClass

Type: string

Default: 'slick-dots'

CSS class for dots
dots

Type: bool

Default: Default
draggable

Type: bool

Default: true

Enable scrollable via dragging on desktop
easing

Type: string

Default: 'linear'
fade

Type: bool

Default: Default
focusOnSelect

Type: bool

Default: false

Go to slide on click
infinite

Type: bool

Default: true

Infinitely wrap around contents
initialSlide

Type: int

Default: 0

Index of first slide
lazyLoad

Type: ondemand`/`progressive

Default: null

Load images or render components on demand or progressively
onEdge

Type: func

Default: null

Edge dragged event in finite case, `direction => {...}`
onInit

Type: func

Default: null

componentWillMount callback. `() => void`
onLazyLoad

Type: func

Default: null

Callback after slides load lazily `slidesLoaded => {...}`
onReInit

Type: func

Default: null

componentDidUpdate callback. `() => void`
onSwipe

Type: func

Default: null

Callback after slide changes by swiping
pauseOnDotsHover

Type: bool

Default: false

Prevents autoplay while hovering on dots
pauseOnFocus

Type: bool

Default: false

Prevents autoplay while focused on slides
pauseOnHover

Type: bool

Default: true

Prevents autoplay while hovering on track
responsive

Type: array

Default: null

Customize based on breakpoints (see the demo example for better understanding)
rows

Type: integer

Default: 1

number of rows per slide in the slider, (enables grid mode)
rtl

Type: bool

Default: false

Reverses the slide order
slide

Type: string

Default: 'div'

Slide container type
slidesPerRow

Type: int

Default: 1

number of slides to display in grid mode, this is useful with rows option
slidesToScroll

Type: int

Default: 1

How many slides to scroll at once
slidesToShow

Type: int

Default: 1

How many slides to show in one frame
speed

Type: int

Default: 500

Animation speed in milliseconds
swipeToSlide

Type: bool

Default: false

Enable drag/swipe irrespective of `slidesToScroll`
swipe

Type: bool

Default: true

Enable/disable swiping to change slides
touchMove

Type: bool

Default: true
touchThreshold

Type: int

Default: 5
useCSS

Type: bool

Default: true

Enable/Disable CSS Transitions
useTransform

Type: bool

Default: true

Enable/Disable CSS transforms
variableWidth

Type: bool

Default: false
vertical

Type: bool

Default: false