I have issue with swiper.js when I deploy my website on vercel. Swiper stops my website from re-rendering ( when I make change content stays the same ). On development environment everything works perfectly, but when I push it on vercel content stays the same. Here is my code:
import React from "react";
import Product from "../../components/PremiumProducts/Product";
// import { Swiper, SwiperSlide } from "swiper/react";
// import SwiperCore, { Autoplay } from "swiper";
// SwiperCore.use([Autoplay]);
// Import Swiper styles
// import "swiper/css";
export default function PremiumProducts(props) {
const { data } = props;
console.log(data);
return (
<>
<section className="premium">
<div className="premium__brands">
<div className="premium__brands-content center-content">
{/* <Swiper
spaceBetween={10}
slidesPerView={5}
loop={true}
autoplay={{ delay: 2000, disableOnInteraction: false }}
breakpoints={{
400: {
width: 400,
slidesPerView: 2,
spaceBetween: 5,
},
}}
>
<SwiperSlide>
<img src="/Premium/Brands/ime.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/Premium/Brands/biooil.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/Premium/Brands/tuf.png" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="/Premium/Brands/fedor.png" alt="" />
</SwiperSlide>
</Swiper> */}
</div>
</div>
<div className="premium__products">
<div className="center-content">
<div className="premium__products-content">
{data.map((product, i) => {
return <Product key={i} {...product} />;
})}
</div>
</div>
</div>
</section>
</>
);
}
export async function getStaticProps() {
const resp = await fetch(`${process.env.SERVER_API}premium-products`);
const data = await resp.json();
return {
props: data,
revalidate: 1,
};
}