Next.js Discord

Discord Forum

Scripts break after page navigation with Next.js Link component

Unanswered
miracim posted this in #help-forum
Open in Discord
miracimOP
Script tags stop working when navigating to another page, but this happens because of Next.js Link component. When using regular <a> tags, the scripts work fine. The problem seems to be related to fast refreshing


app/[locale]/layout.tsx
import "@/public/icon/icomoon/style.css";
import "../css/bootstrap.min.css";
import "../css/swiper-bundle.min.css";
import "../css/animate.css";
import "../css/styles.css";

import { Afacad, Ballet, Sora } from "next/font/google";
import { NextIntlClientProvider, hasLocale } from "next-intl";

import Footer from "../layout/footer";
import Gallery from "../layout/gallery";
import type { Metadata } from "next";
import Navigation from "../layout/navigation";
import NewLetter from "../layout/new-letter";
import { SWRProvider } from "../providers/swr-provider";
import Script from "next/script";
import Search from "../layout/search";
import Toolbar from "../layout/toolbar";
import { notFound } from "next/navigation";
import { routing } from "@/src/i18n/routing";

const afacad = Afacad({
  subsets: ["latin"],
  variable: "--font-afacad",
  display: "swap",
});

const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  display: "swap",
});

const ballet = Ballet({
  subsets: ["latin"],
  variable: "--font-ballet",
  display: "swap",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }
  return (
    <html
      lang={locale}
      suppressHydrationWarning
      className={`${afacad.variable} ${sora.variable} ${ballet.variable}`}
    >
      <body>
        <NextIntlClientProvider>
          <Script
            id="jquery"
            src="/js/jquery.min.js"
            strategy="beforeInteractive"
          />
          <Script
            id="bootstrap"
            src="/js/bootstrap.min.js"
            strategy="beforeInteractive"
          />
        
        ...

        
          <Script
            id="swiper"
            src="/js/swiper-bundle.min.js"
            strategy="lazyOnload"
          />
          <Script id="carousel" src="/js/carousel.js" strategy="lazyOnload" />
          <Script
            id="bootstrap-select"
            src="/js/bootstrap-select.min.js"
            strategy="lazyOnload"
          />
          <Script
            id="lazysize"
            src="/js/lazysize.min.js"
            strategy="lazyOnload"
          />
          <Script id="wow" src="/js/wow.min.js" strategy="lazyOnload" />
          <Script
            id="infinityslide"
            src="/js/infinityslide.js"
            strategy="lazyOnload"
          />
          <Script
            id="parallaxie"
            src="/js/parallaxie.js"
            strategy="lazyOnload"
          />
          <Script
            id="count-down"
            src="/js/count-down.js"
            strategy="lazyOnload"
          />
          <Script id="main" src="/js/main.js" strategy="lazyOnload" />
        </NextIntlClientProvider>
      </body>
    </html>
  );
}


Nextjs 15.3

2 Replies

miracimOP
&752637460550385834 can you help me guys
Asian black bear
Moderator pings are only for moderation purposes. Please dont just ping us for help like this.