Why am I getting Next Js hydration error? - next.js

Question

I am trying to make an web app and using react swiper fot it, but it is causing hydration. When I comment out the react swiper then I don't see the error.
I am getting "Warning: Text content did not match. Server: "Zach N." Client: "Lisa A." in the console.
Can someone help me to fix it????
Why am I getting this error and how to solve it?
thanks in advance.
// Slider
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import AOS from "aos";
import "aos/dist/aos.css"; // You can also use <link> for styles
function Testimonials() {
const sliderRef = useRef(null);
useEffect(() => {
AOS.init({
duration: 1500,
});
});
const handlePrev = useCallback(() => {
if (!sliderRef.current) return;
sliderRef.current.swiper.slidePrev();
}, []);
const handleNext = useCallback(() => {
if (!sliderRef.current) return;
sliderRef.current.swiper.slideNext();
}, []);
return (
<div>
<div className="lg:h-[80vh] lg:pt-16 ">
<div data-aos="fade-up">
<h2 className="text-[40px] xl:text-[70px] leading-[44px] lx:leading-[70px] mt-[70px] mb-[15px] md:mb-[19px] font-bold font-FreightSemibold ">
Today&apos;s news.Edited to be{" "}
<span className="italic block xl:mt-7">
unbiased as humanly possible.
</span>
</h2>
</div>
<div data-aos="fade-up" className="flex lg:justify-between">
<div className="w-[600px]">
<p className="xl:text-[20px]">
Every morning, we triple check headlines, stories and sources for
bias. All by hand, no algorithms.{" "}
<span className="font-bold">See what readers are saying:</span>
</p>
</div>
<div className="hidden md:flex ">
<div
onClick={handlePrev}
className="w-[55.84px] h-[55.84px] group rounded-full flex cursor-pointer hover:bg-black md:mx-[18px] justify-center items-center ring-1 ring-black "
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 group-hover:text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M7 16l-4-4m0 0l4-4m-4 4h18"
/>
</svg>
</div>
<div
onClick={handleNext}
className="w-[55.84px] h-[55.84px] group rounded-full flex cursor-pointer justify-center items-center hover:bg-black ring-1 ring-black "
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 group-hover:text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</div>
</div>
</div>
{/* Slider Here */}
<div className="md:flex">
<Swiper
ref={sliderRef}
loop={true}
pagination={{ clickable: true }}
slidesPerView={1}
spaceBetween={10}
breakpoints={{
"#0.00": {
slidesPerView: 1,
spaceBetween: 10,
},
"#0.75": {
slidesPerView: 2,
spaceBetween: 20,
},
"#1.00": {
slidesPerView: 3,
spaceBetween: 40,
},
"#1.50": {
slidesPerView: 4,
spaceBetween: 50,
},
}}
>
<SwiperSlide>
<div data-aos="fade-left" className="mt-[80px] md:mx-5 mb-[45px]">
<div className="border-black mb-[40px] border-b-[1px] ">
<h3 className="font-bold py-1">Lisa A.</h3>
</div>
<div className="mb-[40px]">
<p>
“I consider myself a centrist - all the other news sources
lean so far to the left or right, it makes my head spin.
Thank you for{" "}
<span className={`bg-[#6fef8d]`}>
providing strictly the facts
</span>{" "}
- you re the only news source that can actually pull off
neutrality these days.”
</p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div data-aos="fade-left" className="mt-[80px] md:mx-2 mb-[45px]">
<div className="border-black mb-[40px] border-b-[1px] ">
<h3 className="font-bold py-1">Emma S.</h3>
</div>
<div className="mb-[40px]">
<p>
“I consider myself a centrist - all the other news sources
lean so far to the left or right, it makes my head spin.
Thank you for{" "}
<span className={`bg-[#EFEF6F]`}>
providing strictly the facts
</span>{" "}
- you re the only news source that can actually pull off
neutrality these days.”
</p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div data-aos="fade-left" className="mt-[80px] md:mx-5 mb-[45px]">
<div className="border-black mb-[40px] border-b-[1px] ">
<h3 className="font-bold py-1">Jim M.</h3>
</div>
<div className="mb-[40px]">
<p>
“I stopped watching the news, so sick of the bias. Was
searching for an alternative that would just tell me WHAT
happened, with NO editorializing. I found it. It s called
1440. It assumes you are smart enough to{" "}
<span className={`bg-[#7EDCF2]`}>
form your own opinions.
</span>
</p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div data-aos="fade-left" className="mt-[80px] md:mx-5 mb-[45px]">
<div className="border-black mb-[40px] border-b-[1px] ">
<h3 className="font-bold py-1">Zach N.</h3>
</div>
<div className="mb-[40px]">
<p className="">
“I stopped my habit of spending my day doomscrolling. I
signed up for 1440 &{" "}
<span className={`bg-[#F48CD9]`}>
{" "}
feel better informed in less time.
</span>{" "}
I m also less stressed out. Thank you.
</p>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
);
}
export default Testimonials;

Answer 1

Replace slidesPerView={1} by slidesPerView="auto"
Also update your AOS init like this to avoid infinite loop
useEffect(() => {
AOS.init({
duration: 1500,
});
},[]);