Only one instance of the Next.js inline script is loaded

Question

Only one instance of the Next.js inline script is loaded

Incorporating Tiny Slider into my Next.js application has been a success, but I am facing an issue with the inline script that controls the slider's behavior. The script loads correctly when I first launch index.js. However, if I navigate to another page using Link and return to index.js, the script fails to load.

Here is the code snippet for the script in index.js:

 {/* Script */}
        <Script id='tester'>
          {`
            var slider = tns({
              container: '.my-slider',
              items: 6,
              autoplay: true,
              autoplayTimeout: 2000,
              gutter: 20,
              autoplayButtonOutput: false,
              controls: false,
              navPosition: 'bottom',
              nav: false,
              mouseDrag: true,
              arrowKeys: true,
              responsive: {
                300: {
                  items: 2,
                  gutter: 50,
                  center: true,
                  fixedWidth: 250,
                },
                700: {
                  items: 3,
                  gutter: 50,
                  center: true,
                  fixedWidth: 250,
                },
                1440: {
                  items: 3,
                  gutter: 50,
                  fixedWidth: 250,
                  center: true,
                }
              }
            });
          `}
        </Script>

I'm looking for a solution to ensure that the script loads every time index.js is accessed, not just on the initial visit. Any suggestions on how I can achieve this? You can find the complete code here - https://github.com/YaddyVirus/Esttheva

javascript next.js

Answer 1

Answer №1

Learn how to implement tiny-slider in a next.js application with these simple steps.

Create a new file named pages/_document.js to handle the styles loading

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Below is an example page showcasing the implementation of the slider

import { useEffect, useRef } from "react";

const App = () => {
  const ref = useRef(true);

  useEffect(() => {
    let slider;
    // Ensure tiny-slider is loaded client-side and only once
    if (typeof window !== "undefined" && ref.current) {
      ref.current = false;
      // Lazy load the slider code client side
      import("tiny-slider").then((x) => {
        slider = x.tns({
          container: ".slider",
          items: 3,
          slideBy: "page",
          autoplay: true
        });
      });
    }
    // Destroy the slider when unmounted
    return slider?.destroy();
  }, []);

  return (
    <div>
      <div className="slider">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
  );
};

export default App;

Code sandbox link for reference: https://codesandbox.io/s/tina-slider-nextjs-0z8zi6?file=/pages/index.js:0-806

Key points to note about this solution:

The ref variable keeps track of whether the hook has been called to prevent duplicates
We use
```
typeof window !== "undefined"
```
to load tiny-slider only on the client-side and avoid server-side errors
The tns function is invoked as per the documentation

Answer 2

Learn how to implement tiny-slider in a next.js application with these simple steps.

Create a new file named pages/_document.js to handle the styles loading

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Below is an example page showcasing the implementation of the slider

import { useEffect, useRef } from "react";

const App = () => {
  const ref = useRef(true);

  useEffect(() => {
    let slider;
    // Ensure tiny-slider is loaded client-side and only once
    if (typeof window !== "undefined" && ref.current) {
      ref.current = false;
      // Lazy load the slider code client side
      import("tiny-slider").then((x) => {
        slider = x.tns({
          container: ".slider",
          items: 3,
          slideBy: "page",
          autoplay: true
        });
      });
    }
    // Destroy the slider when unmounted
    return slider?.destroy();
  }, []);

  return (
    <div>
      <div className="slider">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
  );
};

export default App;

Code sandbox link for reference: https://codesandbox.io/s/tina-slider-nextjs-0z8zi6?file=/pages/index.js:0-806

Key points to note about this solution:

The ref variable keeps track of whether the hook has been called to prevent duplicates
We use
```
typeof window !== "undefined"
```
to load tiny-slider only on the client-side and avoid server-side errors
The tns function is invoked as per the documentation

Only one instance of the Next.js inline script is loaded

Answer №1

Similar questions

React Native buttons are displaying at a fixed width and not adjusting as expected

Click outside of this popup to dismiss it

"Comparison: Java Installation vs. Enabling Java in Your Web Browser

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Unable to establish proper functionality of username variables in Node.js chat application

Leveraging the outcome of a for loop in order to set a condition within an else if statement

Receiving a PNG image in the response of a REST call from ServiceNow, the data appears to be garbled with junk characters

Error 500: An invalid data type was encountered in an express.js node.js environment

Maximizing the potential of Angular forms through native FormData

I am looking to implement a dropdown menu that appears after clicking on an image. Any suggestions on how to achieve this using

Placing a user's username within an ejs template using express and node.js

The troubleshooting of debugging javascript remotely on IntelliJ with the JetBrains Chrome extension is proving to be unsuccessful

Adding dynamic metadata to a specific page in a next.js app using the router

Is there a way to verify and send notifications when duplicate entries are added to my table?

The async and await functions do not necessarily wait for one another

Utilizing array iteration to display images

Unique bullets for page navigation in Swiper.js/react

Maintain dropdown menu visibility while navigating

Detach an item from its parent once it has been added to an array

Is it possible to exchange CSS classes for a specific group of elements using JQuery?