How to Add a Top Loader in Next.js for Better UX | Step-by-Step Guide

Add a sleek, animated progress bar to your Next.js app to improve user experience during page transitions. Follow this simple guide to set it up in just minutes!

Install lib

We will use nextjs-toploader to handle top progress loader:

bash
yarn add nextjs-toploader

or 

npm install nextjs-toploader

Integrate Top Loader into the Next.js App

Create a file app/provider.tsx

jsx
"use client";

import React from "react";
import NextTopLoader from "nextjs-toploader";

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <NextTopLoader color="#ffbe59" />
      {children}
    </>
  );
};

export default Providers;

Notes: You can change the color which you want in the color prop.

App Provider component to root of layout app/layout.tsx (put it inside the body tag)

jsx
<html
  lang="en"
  className={clsx("h-full scroll-smooth bg-white antialiased", inter.variable, lexend.variable)}
>
  <body className="flex h-full flex-col">
    <Providers>
      {children}
    </Providers>
  </body>
</html>

Now every time you click on the link on the Next.js project, the Top Progress Bar will be loading, it will inform for user that the website is loading, so it will improve the user experience.

Add a sleek, animated progress bar to your Next.js app to improve user experience during page transitions. Follow this simple guide to set it up in just minutes!

Install lib

We will use nextjs-toploader to handle top progress loader:

bash
yarn add nextjs-toploader

or 

npm install nextjs-toploader

Integrate Top Loader into the Next.js App

Create a file app/provider.tsx

jsx
"use client";

import React from "react";
import NextTopLoader from "nextjs-toploader";

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <NextTopLoader color="#ffbe59" />
      {children}
    </>
  );
};

export default Providers;

Notes: You can change the color which you want in the color prop.

App Provider component to root of layout app/layout.tsx (put it inside the body tag)

jsx
<html
  lang="en"
  className={clsx("h-full scroll-smooth bg-white antialiased", inter.variable, lexend.variable)}
>
  <body className="flex h-full flex-col">
    <Providers>
      {children}
    </Providers>
  </body>
</html>

Now every time you click on the link on the Next.js project, the Top Progress Bar will be loading, it will inform for user that the website is loading, so it will improve the user experience.

Enhance Your Next.js App with a Smooth Top Loader

Install lib

Integrate Top Loader into the Next.js App

Enhance Your Next.js App with a Smooth Top Loader

Install lib

Integrate Top Loader into the Next.js App