How to use jQuery & Slick in Next.js App?-CodePudding

I want to implement this into my Next.js App

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

I tried to add both libraries needed for this to work in the _document.js file and then link the js code in text-slider from /public

  <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>

But it ain't working, somehow - it doesn't show any error. It's just now working - hope you can help me!

CodePudding user response：

First of all. It is recommended to not use jquery in react or next js app.

Then if you want to use jquery in next js app you can use next docuemnt..

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

You can use now slick by calling slick slider cdns link in script and css. Ans use them. It is recommend to use React slick in next js app