Next.js内联脚本仅加载一次

mm9b1k5b 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(166)

我在Next.js应用中实现了Tiny Slider，它需要页面上的内联脚本来控制滑块的行为。现在，虽然脚本在我第一次启动index.js时正确加载，但每当我使用Link导航到另一个页面并返回index.js时，脚本都无法加载。
下面是我在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>

我需要在每次index.js加载时加载脚本，而不仅仅是第一次加载。

next.js

来源：https://stackoverflow.com/questions/72580914/next-js-inline-script-only-loads-once

1条答案

按热度按时间

34gzjxbg1#

以下是向next.js应用程序添加tiny-slider的步骤。
1.添加pages/_document.js以加载样式

// 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>
  )
}

1.下面是一个加载滑块的示例页面

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    let slider;
    // Tiny slider only can be loaded once and can only be loaded clint side
    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
        });
      });
    }
    // Destory the slider when it is unmouted
    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;

链接到代码沙箱：https://codesandbox.io/s/tina-slider-nextjs-0z8zi6?file=/pages/index.js:0-806
以下是有关该解决方案的几个关键注意事项

ref跟踪钩子是否已经被调用（在开发模式下，18个钩子被调用两次）
我们使用typeof window !== "undefined"来确保tiny-window只在客户端加载，而不在服务器上加载（这会导致“window is undefined”错误）
我们正在根据文档调用tns函数

赞(0）回复(0）举报 2022-11-23

我来回答

Next.js内联脚本仅加载一次

1条答案

相关问题

热门标签

最新问答