Using Owl Carousel With NextJs

Here we will learn how to initialize a simple next app and use every developer’s favorite slider: Owl Carousel

Source: FreePik

For those of you that want to skip my unnecessary speech you can look up the repository here: https://github.com/Uny1me/owl-nextjs

If you’ve only been hearing about Netxt.js and haven’t really dabbled in it:

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

On the other hand:

Owl carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

I should point out there are a lot of questions and failed attempts on StackOverflow, so if you come across anyone that needs help, feel free to point them to this article.

Getting Started: Setting up a Next Project

The very first step is to initialise your next project.

npx create-next-app@latest
# or
yarn create next-app

after your setup, in the console,

npm run dev

And now, the next step is to install the owl carousel, check it out here or use commands:

npm i react-owl-carousel
npm i jquery

Go to the pages folder and create a file called slider.js and export the Slider function, something like this:

import React from “react”;
export default function Slider() {
    return <div>Hello</div>;
 }

Before we proceed there are a few more configurations to do:

In the next.config.js file

import webpack before the nextConfig function using

const webpack = require("webpack");

and then add this in the function,

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
   config.plugins.push(
    new webpack.ProvidePlugin({
    $: “jquery”,
    jQuery: “jquery”,
    “window.jQuery”: “jquery”,
 }));
return config;

That your file looks like this:

next-config.js

You will probably receive an error telling you that the window is not defined, in your slider.js go ahead and add this code:

var $ = require(“jquery”);
if (typeof window !== “undefined”) {
   window.$ = window.jQuery = require(“jquery”);
}

The next step is to load the required stylesheet and JS:

import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

Such that your slider js file looks something like this:

slider.js

Next, we need to import the owl carousel component into our app and we will use Next.js dynamic import

import dynamic from “next/dynamic”;
const OwlCarousel = dynamic(() => import(“react-owl-carousel”), {
  ssr: false,
});

Dynamic imports allow for the library to only be rendered when needed and not burden the whole application, and we set Server Side Rendering to false which prevents it from sending a new HTML page upon rendering the component correct me if I’m wrong

And now we’re all set, your Owl carousel should load up completely fine.

Customizations

This part isn’t mandatory, but here’s a simple method to use to customize your Carousel.

CSS

we do have to make it look nice, don’t we?

.item {
 height: 10rem;
 background: #4dc7a0;
 padding: 1rem;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
}

for the responsive parameter I created an object to avoid the messy code below:

Enjoy Your Slider!

Finished Preview