nextjs-toploader

NextJS TopLoader: A Comprehensive Overview

NextJS TopLoader is a practical and efficient component designed to enhance the user experience in applications built with Next.js and React. It utilizes the popular nprogress library to implement a visually appealing top loading bar that is easy to integrate and compatible with the latest versions of Next.js, including version 14.

Installation

Adding NextJS TopLoader to your project is straightforward, with support for both npm and yarn:

Using npm:
```
npm install nextjs-toploader
```
Using yarn:
```
yarn add nextjs-toploader
```

How to Use

To incorporate NextJS TopLoader into your project, you can import it as follows:

import NextTopLoader from 'nextjs-toploader';

In an `app` Folder Structure

For those using the app folder structure, you can render the TopLoader within your RootLayout component. Simply place <NextTopLoader /> inside the <body></body> of your return() function:

import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

In a `pages` Folder Structure

If you're working within a pages folder structure, it's recommended to use <PagesTopLoader />, especially if you are utilizing the useRouter hook. Place it within the return() of your MyApp() function:

import { PagesTopLoader } from 'nextjs-toploader/pages';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <PagesTopLoader />
      <Component {...pageProps} />;
    </>
  );
}

Compatibility with `useRouter` Hook

NextJS TopLoader integrates seamlessly with the useRouter hook, ensuring that the top loading bar is triggered correctly when navigating through routes.

Using `useRouter` with `app/layout.js`

Import the useRouter hook from NextJS TopLoader:

import { useRouter } from 'nextjs-toploader/app';

You can then use the hook in your code as usual:

const router = useRouter();
router.push('/some-page');

Usage with Other React Frameworks

NextJS TopLoader is not limited to Next.js projects; it can also be used with other React-based frameworks, such as Vite React. To implement it, render the component within your App.js:

import NextTopLoader from 'nextjs-toploader';

const App = () => {
  return (
    <div>
      <Router>
        <NextTopLoader />
        <Routes>{/* Your Routes Here */}</Routes>
      </Router>
    </div>
  );
};

export default App;

Default Configuration

The default settings of NextJS TopLoader provide a smooth and visually pleasant loading bar without the need for extra configuration. The default properties include settings such as color, height, speed, and more, as shown below:

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
  template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex={1600}
  showAtBottom={false}
/>

Community and Support

NextJS TopLoader thrives on community contributions and financial support from individuals and organizations. Contributors can enhance the project by adding code or providing financial assistance through various platforms.

The project benefits from a diverse group of code contributors, and financial supporters have the opportunity to feature their logos on the project’s community page, providing visibility and a direct link to their sites.

Overall, NextJS TopLoader stands out as an invaluable tool for developers seeking to improve the navigation experience in their Next.js and React applications with minimal setup and high flexibility.