I am developing a new website, [Alisa](https://www.alisa.pics), using the new NextJS 14 app router. To supercharge the development of Alisa, I utilized 11 awesome free packages. 

They are listed in any order, so feel free to check out these packages to make your NextJS 14 website extraordinary.

## 1. [nextjs-toploader](https://www.npmjs.com/package/nextjs-toploader)

Have you ever clicked a link in a website and waited for a few seconds before the page loads?

In NextJS 14, dynamic rendering using server components is frequently utilized so the fetching of data from the server takes some time.

To overcome the waiting process of the user, you can use `nextjs-toploader` to create a loading bar component anywhere on your site.

Install `nextjs-toploader` in your website.

```
npm install nextjs-toploader
```

Import `NextTopLoader` in your `app/layout.js`.

```js
import NextTopLoader from 'nextjs-toploader';

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

And voilà, you have now a working loading bar in your website. 🙌

You can customize the appearance of your `nextjs-toploader` depending on your taste. For my website, Alisa, I did something like this:

```js
<NextTopLoader showSpinner={false} color="#8a2be2"/>
```

## 2. [react-hot-toast](https://www.npmjs.com/package/react-hot-toast)

A form submission, a successful login, an upload finished etc., are not complete without some kind of a toast or notification to confirm a successful action.

`react-hot-toast` offers an intuitive solution to create a toast anywhere on your app.

Start by installing it in your website.

```
npm install react-hot-toast
```

Then, on your `app/layout.js`, import the `Toaster`.

```js
import { Toaster } from "react-hot-toast";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Toaster position="bottom-center" />
        {children}
      </body>
    </html>
  );
}
```
Now, you can trigger it by importing `toast` anywhere in your app.

```js
import toast from "react-hot-toast";

toast.success("Comment added.");
```

## 3. [cookies-next](https://www.npmjs.com/package/cookies-next)

Have you ever wondered how you can store crucial information that you can readily get or set directly inside your application without fetching the server API?

Then, you're looking for cookies!

`cookies-next` lets you get, set and remove cookies in your NextJS 14 applications.

Let's first install `cookies-next`.

```
npm i cookies-next
```

Then, in your `client component`, you can use the following functions.

```js
'use client'
import { getCookies, setCookie, deleteCookie, getCookie } from 'cookies-next';

getCookies();
getCookie('key');
setCookie('key', 'value');
deleteCookie('key');
```

Note that you can only read cookies in `server components` using the cookies function from `next/headers` like so:

```js
import { setCookie, getCookie, getCookies, deleteCookie, hasCookie } from 'cookies-next';
import { cookies } from 'next/headers';

 // It's not possible to update the cookie in RSC
 ❌ setCookie("test", "value", { cookies }); 👉🏻// Won't work.
 ❌ deleteCookie('test1', { cookies }); 👉🏻// Won't work.
  
 ✔️ getCookie('test1', { cookies });
 ✔️ getCookies({ cookies });
 ✔️ hasCookie('test1', { cookies });
```

For `server actions`, you can read/update the cookies, like so:

```js
'use server';

import { cookies } from 'next/headers';
import { setCookie, deleteCookie, hasCookie, getCookie, getCookies } from 'cookies-next';

export async function testAction() {
  setCookie('test', 'value', { cookies });
  getCookie('test', { cookies });
  getCookies({ cookies });
  hasCookie('test', { cookies });
  deleteCookie('test', { cookies });
}
```
Caution! 
Do not store confidential information in your cookies like API keys to prevent malicious attacks from bad users.

## 4. [react-loader-spinner](https://www.npmjs.com/package/react-loader-spinner)

Having a cool loader or spinner while the data is fetching from the server makes your website extraordinary.

`react-loader-spinner` offers 30+ spinners that you can utilize in your application to make it more appealing to your users.

Start by installing `react-loader-spinner`.

```
npm i react-loader-spinner
```

Then, create a component that you can import anywhere in your app, like so:

```js
import { Oval } from "react-loader-spinner";

export default function LoaderUI() {
  return (
    <Oval
      visible={true}
      height="30"
      width="30"
      color="#8a2be2"
      secondaryColor="8a2be2"
      ariaLabel="oval-loading"
      wrapperStyle={{}}
      wrapperClass=""
    />
  );
}
```

There you go! You now have a working loader/spinner that your users will surely loved.

## 5. [react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)

Have you look at some applications like facebook and youtube and wonder how they create a loading skeleton of the data while they are being fetched from the server?

Don't worry, `react-loading-skeleton` to the rescue! 🦸‍♂️

Now, you can also create your own beautiful, animated loading skeletons straight to your application.

Let's install `react-loading-skeleton`.

```
npm i react-loading-skeleton
```

Create a component so you can easily use it everywhere in your app, like so:

```js
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

export default function SkeletonLoader() {
  return (
    <SkeletonTheme highlightColor="#E8DAEF" height="300px">
      <p>
        <Skeleton />
      </p>
    </SkeletonTheme>
  );
}
```

Note that you can also change the `highlightColor` and `height` in the `SkeletonTheme` depending on your needs.

## 6. [@knocklabs/react](https://www.npmjs.com/package/@knocklabs/react) and [@knocklabs/node](https://www.npmjs.com/package/@knocklabs/node)

A notification system is very much needed when you want users to stay updated with the current happenings in your application.

But, how can you create a very complex notification system without the need to study for weeks on its implementation or hire developers to do it for you?

Well, just [knock](https://knock.app/) and a door will open for you. *(pun intended)* 😉

Using a package `@knocklabs/react`, you can readily integrate `knock` straight in you NextJS 14 application.

Start by installing `@knocklabs/react`.

```
npm i @knocklabs/react
```

Then, create component `Notification`, like so:

```js
import {
  KnockProvider,
  KnockFeedProvider,
  NotificationIconButton,
  NotificationFeedPopover,
} from "@knocklabs/react";

// Required CSS import, unless you're overriding the styling
import "@knocklabs/react/dist/index.css";

export default function Notification() {
  const [isVisible, setIsVisible] = useState(false);
  const notifButtonRef = useRef(null);

  return (
    <KnockProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} userId={userId}>
      <KnockFeedProvider feedId={process.env.KNOCK_FEED_ID}>
        <div>
          <NotificationIconButton
            ref={notifButtonRef}
            onClick={(e) => setIsVisible(!isVisible)}
          />
          <NotificationFeedPopover
            buttonRef={notifButtonRef}
            isVisible={isVisible}
            onClose={() => setIsVisible(false)}
          />
        </div>
      </KnockFeedProvider>
    </KnockProvider>
  );
};
```
You can import this `Notification` component anywhere in your app. For Alisa, I imported it in navigation bar.

Let's say you want to notify a user when their uploaded image was loved by another user.

Install `@knocklabs/node`.

```
npm i @knocklabs/node
```

In your `server actions` file, import `Knock`, like so:

```js
"use server";

import { Knock } from "@knocklabs/node";
const knockClient = new Knock(process.env.KNOCK_SECRET_API_KEY);

// NOTIFY USER WHEN THEIR IMAGE IS LOVED
export async function notifyLove(image, actor) {
  await knockClient.notify("love", {
    recipients: [image.uploader.slug],
    actor: actor,
    data: {
      image: {
        caption: image.caption,
        slug: image.slug,
      },
    },
  });
}
```

To know more on how to integrate `knock` in your application, checkout their very detailed [documention](https://docs.knock.app/).

## 7. [backblaze-b2](https://www.npmjs.com/package/backblaze-b2)

Have you ever wondered how you can integrate the awesome [Backblaze B2 Cloud Storage](https://www.backblaze.com/cloud-storage) service in your NextJS 14 application?

Well, `backblaze-b2` package is there for you.

Let's say you want to upload an image directly from your NextJS 14 website into a public bucket in B2 cloud storage.

First, install `backblaze-b2` package.

```
npm i backblaze-b2
```

Now, create an API route handler to process an image upload request, like so:

From `app/api/upload/route.js`:

```js
import B2 from "backblaze-b2";

export async function POST(request) {
  const formData = await request.formData();
  const file = formData.get("file");
  const fileName = formData.get("x-filename");

  // Convert to buffer data to enable upload to Backblaze B2
  const arrayBuffer = await file.arrayBuffer();
  const buffer = new Uint8Array(arrayBuffer);

  const b2 = new B2({
    applicationKeyId: process.env.BACKBLAZE_KEY_ID,
    applicationKey: process.env.BACKBLAZE_APP_KEY,
  });

  // b2 auth tokens are valid for 24 hours
  // .authorize returns the download url,
  // .getUploadUrl returns the upload url and auth token
  const { data: authData } = await b2.authorize();
  const { data: uploadData } = await b2.getUploadUrl({
    bucketId: process.env.BACKBLAZE_BUCKET_ID,
  });

  const { data } = await b2.uploadFile({
    uploadUrl: uploadData.uploadUrl,
    uploadAuthToken: uploadData.authorizationToken,
    data: buffer,
    // there are no real directories in b2, if you want to place
    // your file in a folder structure, do so with slashes. ex:
    //   fileName: `my-subfolder/uploads/${fileName}`
    fileName: `images/uploads/${fileName}`,
  });

  // Return image url from Blackblaze b2
  return Response.json({
    status: 200,
    url: `https://f005.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=${data.fileId}`,
  });
}
```

You now have a working script to handle image upload in your public B2 Cloud Bucket. 🍻

## 8. [date-fns](https://www.npmjs.com/package/date-fns)

Date manipulation is frequently used in any application. That's why when you want to bend a date to your own will, `date-fns` is there at your disposal.

Let's say for example, you want to format the date when the user uploaded an image.

Install `date-fns` in your application.

```
npm i date-fns
```

Now, create a component to handle date formatting.

```js
import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";

export default function DateUploaded({ date }) {
  return (
    <div>
      {formatDistanceToNowStrict(new Date(date), {
        addSuffix: true,
        includeSeconds: true,
      })}
    </div>
  );
}
```
There you go, import the component to format the date like so: `3 days ago`.

## 9. [next-auth](https://www.npmjs.com/package/next-auth)

Now, you must be wondering, how should I handle the authentication of users in my Nextjs 14 application?

Fret not, `next-auth` to the rescue!

`NextAuth.js` is an open-source authentication system that you can use directly in your NextJS app without the need to build your own from scratch.

It comes with built-in functionality for logging in and signing out users. You can read more by visiting their [homepage](https://next-auth.js.org/).

Let's say you want to create an authentication system using email and password.

Install `next-auth` first in your app.

```
npm i next-auth
```

Then, create an API route handler inside `[...nextauth]`. Yeah, this should be the name of the folder to make next-auth work.
The folder structure would look something like this:
`app/api/auth/[...nextauth]/route.js`.

Copy the following script:

```js
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

async function authenticate(emailOrUsername, password) {
  const uploader = {
    email: email,
    password: password,
  };

  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/uploader/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(uploader),
  });

  return res;
}

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        if (typeof credentials !== "undefined") {
          const res = await authenticate(
            credentials.email,
            credentials.password,
          );

          if (res.status === 200) {
            const data = await res.json();
            return {
              name: data.name,
              email: data.email,
              id: data.id,
            };
          } else {
            throw new Error("Invalid credentials");
          }
        } else {
          return null;
        }
      },
    }),
  ],
  pages: {
    signIn: "/login",
    signOut: "/auth/signout",
    error: "/auth/error", // Error code passed in query string as ?error=
    verifyRequest: "/auth/verify-request", // (used for check email message)
    newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
  },
  session: {
    strategy: "jwt",
    maxAge: 43200,
  },
  callbacks: {
    async session({ session, token, user }) {
      // Send properties to the client like the user id
      session.id = token.sub;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
```

That's it! You now have a working authentication system. 🎉

## 10. [react-icons](https://www.npmjs.com/package/react-icons)

What if you want to use unlimited free icons easily in one whole package?

`React-icons` offers thousands of free icons that you can use in your application easily.

Try browsing in their [homepage](https://react-icons.github.io/react-icons/) and see that they have all your needed icons.

To use `react-icons` in your application, install it first.

```
npm i react-icons
```

Then, browse the icons you want in their website. Let's say you want to add a `burger menu icon` in your navbar. Just type `burger` in their search bar and you'll see different variations of `burger` icon.

Click on the `burger` icon that you want, then, the necesary code that you will use will pop out, like so:

```js
import { GiHamburgerMenu } from "react-icons/gi";

<GiHamburgerMenu />
```

That's it! Just copy that component in your app and the burger icon will now appear.


## 11. [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer)

If you want to have an infinite scroll functionality in your applciation then you need `react-intersection-observer`. It comes with a built-in hook that detects when a user reaches the end of the page.

Let's install it in our app.

```
npm i react-intersection-observer
```

Now, import `useInView` hook in your component that you want to have an inifinite scroll functionality.

```js
import { useInView } from "react-intersection-observer";

export default function Component() {

  const { ref, inView } = useInView();

  useEffect(() => {
    // When user scroll at the bottom, load more images!
    if (inView) {
       // function to load more images
      loadMoreImages();
    }
  }, [inView]);

   return (
       <div ref={ref}>
          // A loader UI component
          <Loader />
       </div>
   );
}
```

You now have an infinite scroll system in your application! 🍻

## Conclusion

Let's wrap it up! All the awesome 11 packages that I used to build my new NextJS 14 website are:

1. nextjs-toploader
2. react-hot-toast
3. cookies-next
4. react-loader-spinner
5. react-loading-skeleton
6. @knocklabs/react and @knocklabs/node
7. backblaze-b2
8. date-fns
9. next-auth
10. react-icons
11. react-intersection-observer

That was a lot of packages. *Phew*! Hopefully, you got something that you can use in your next website. 

Feel free to leave a comment below if you have any questions. Cheers!