如何在 Next.js 应用程序中使用 jQuery 和 Slick？

Question

我想将其实现到我的 Next.js 应用程序中

https://codepen.io/Lemonzillah/pen/rmQLRm

我尝试在 _document.js 文件中添加为此工作所需的两个库，然后从 /public 链接 text-slider 中的 js 代码

  <Main />
      <NextScript />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script src="public/text-Slider.js"></script>

但它不工作，不知何故 - 它没有显示任何错误。 它刚刚开始工作 - 希望你能帮助我！

Answer 1

首先。 建议不要在 react 或 next js app 中使用 jquery。

然后，如果您想在下一个 js 应用程序中使用 jquery，您可以使用下一个文档。 .

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
         **Here you can use custom css link or font link like bootstrap cdn
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="public/text-Slider.js"></script>
      </Html>
    )
  }
}

export default MyDocument

您现在可以通过在脚本和 css 中调用 slick 滑块 cdns 链接来使用 slick。 Ans 使用它们。 建议在下一个 js 应用程序中使用React slick

如何在 Next.js 应用程序中使用 jQuery 和 Slick？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-16 18:40:47

如何在 Next.js 应用程序中使用 jQuery 和 Slick？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-16 18:40:47

解决方案1
1 已采纳 2021-10-16 18:40:47