Script doesn't work when I browse other pages in Next.js

Hey guys. First of all congratulations for your amazing work. I'm using Flickity in a Next.js project and my only problem is that the script loads when the page loads but when I go to browse between pages and go back to my index the script doesn't work anymore and it just works again if I refresh a page. In other words, it only works on the first access. Have you guys seen this problem? Thanks.

My code:

`import Head from 'next/head'; import Header from './Header'; import FeaturedProducts from './FeaturedProducts'; import LastProducts from './LastProducts'; import { getFeaturedProducts, getLastProducts, getCategories } from './dato-cms'; import Script from 'next/dist/client/script'; import Footer from './Footer';

export async function getStaticProps() { const featuredProducts = await getFeaturedProducts(); const lastProducts = await getLastProducts(); const categories = await getCategories();

return { props: { featured: featuredProducts, last: lastProducts, cat: categories, } } };

export default function Home({ featured, last, cat }) {

return ( <>

iMall 071

  <Header cat={cat} />
  <div className="section">

    <main className="container">
      <FeaturedProducts featured={featured} />
      <LastProducts last={last} />
      <Script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"> </Script>
      <Script src="https://kit.fontawesome.com/33c943d672.js" crossorigin="anonymous"></Script>
      <Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossOrigin="anonymous"></Script>

    </main>

    <Footer />

  </div>
</>

); } `

metafizzy / flickity

Script doesn't work when I browse other pages in Next.js #1178