In this article, I want to share with you how I was able to upload a file easily to your server using Next.js with the new app directory.

To make it easy for you to follow, and be able to move what you learn here to other projects, we will build a simple form with file input and an image preview.

We will build a fully functioning image uploader using Next.js and the new `route.ts` file that comes with the new app directory.

The same principle that you'll learn here can apply to other files as well, file validation may differ but the same flow stays valid.

To make our project look a little nicer and not boring we will use CSS Modules that are already supported by Next.js we just need to install `sass` to be able to use `SCSS` instead of just `CSS`.

First, let's create a new Next.js project using the `--experimental-app` as described in the [Beta Next.js Docs](https://beta.nextjs.org/docs/installation).

Go ahead, open your terminal, and navigate to your workspace, then to create a new project run `npx create-next-app@latest --experimental-app`.

After running the `create-next-app` command it will prompt you with some simple questions that you may have already seen before, but what is important for us is to use TypeScript, and the `src/` directory.

Now it's time to open the newly created project, using your preferred code editor, for me it's **vscode** and I use `code nextjs_app_dir_file_uploader` to open my project from my terminal.

Let's install **Sass** by running `npm install -D sass`, then rename `src/app/page.module.css` to `src/app/page.module.scss` and also update the import inside the `src/app/page.tsx` file.

In this section, we will add a simple form to the homepage, it will have a placeholder image when no image is selected, and a preview of the selected image after it's been uploaded.

Once a file or image in our case is selected, we will validate the file, then we will send the file to the server, in case of success the server should respond with the `fileUrl` that we will use to preview the uploaded image.

As always I will share with you the code, then explain it to you step by step, go ahead and create a new component at `src/components/FileUploader.tsx` with the code below:

"use client";

import Image from "next/image";
import { ChangeEvent, useState } from "react";
import styles from "./FileUploader.module.scss";

export default function FileUploader() {
  const [imageUrl, setImageUrl] = useState("/images/placeholder-image.jpg");

  const onImageFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const fileInput = e.target;

    if (!fileInput.files) {
      console.warn("no file was chosen");
      return;
    }

    if (!fileInput.files || fileInput.files.length === 0) {
      console.warn("files list is empty");
      return;
    }

    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (!res.ok) {
        console.error("something went wrong, check your console.");
        return;
      }

      const data: { fileUrl: string } = await res.json();

      setImageUrl(data.fileUrl);
    } catch (error) {
      console.error("something went wrong, check your console.");
    }

    /** Reset file input */
    e.target.type = "text";
    e.target.type = "file";
  };

  return (
    <label
      className={styles["file-uploader"]}
      style={{ paddingTop: `calc(100% * (${446} / ${720}))` }}
    >
      <Image
        src={imageUrl}
        alt="uploaded image"
        width={720}
        height={446}
        priority={true}
      />
      <input
        style={{ display: "none" }}
        type="file"
        onChange={onImageFileChange}
      />
    </label>
  );
}

It's a simple component even if it looks a little large, we'll go through it step by step until it's clear to you what each part is about.

Let's start with the `use client` at the top, when using the app directory for routing every component by default is considered like a server component.

So in order to use functionalities that rely on javascript like hooks we need to add the `use client` to tell Next.js this is a client component.

  return (
    <label
      className={styles["file-uploader"]}
      style={{ paddingTop: `calc(100% * (${446} / ${720}))` }}
    >
      <Image
        src={imageUrl}
        alt="uploaded image"
        width={720}
        height={446}
        priority={true}
      />
      <input
        style={{ display: "none" }}
        type="file"
        onChange={onImageFileChange}
      />
    </label>
  );

Our new component simply returns an `<Image .../> to preview the uploaded image and a file `<input .../>` for us to be able to select a file, and as you may have noticed we're hiding it.

We wrap both elements inside a label, so when we click on the image we'll result into showing the browse file popup to select a file.

The main thing here is the `onImageFileChange` handler that runs after a file is selected, let's see what's going on inside that function.

  const [imageUrl, setImageUrl] = useState("/images/placeholder-image.jpg");

  const onImageFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const fileInput = e.target;

    if (!fileInput.files) {
      console.warn("no file was chosen");
      return;
    }

    if (!fileInput.files || fileInput.files.length === 0) {
      console.warn("files list is empty");
      return;
    }

    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (!res.ok) {
        console.error("something went wrong, check your console.");
        return;
      }

      const data: { fileUrl: string } = await res.json();

      setImageUrl(data.fileUrl);
    } catch (error) {
      console.error("something went wrong, check your console.");
    }

    /** Reset file input */
    e.target.type = "text";
    e.target.type = "file";
  };

First, we make sure that a valid file was selected, if no file was selected we just return and log a warning to the console.

Once we have a file, we create a `FormData` object and add our file to it, then we use the `formData` object to send our file to the server using `fetch` and the `/api/upload` endpoint that we will build next.

After we send the request to our upload api, we check if the response is **ok** if not we just log an error to the console and return (but you can always handle errors as fit to your project).

When we get a valid response with a `fileUrl` we use the `imageUrl` state to show the uploaded image preview.

Maybe you've noticed the `import styles from "./FileUploader.module.scss";` at the top, so let's add our component styles.

Create a new file at: `src/components/FileUploader.module.scss` and add the following to it.

.file-uploader {
  display: block;
  position: relative;
  overflow: hidden;

  img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: translateY(-50%);
  }
}

Just some simple css styles to make our image responsive.

Add the FileUploader component to the homepage

Before moving to the next section, where we will build the api endpoint to upload the file to the server, let's add our new component to the homepage, and see what it looks like. 

Open the files `src/app/page.tsx` and replace its content with the following:

import { Inter } from "next/font/google";
import styles from "./page.module.scss";
import FileUploader from "@/components/FileUploader";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <main>
      <div className={`${styles.container} ${inter.className}`}>
        <h1>File uploader</h1>
        <form>
          <div>
            <h3>Thumbnail</h3>
            <FileUploader />
          </div>
        </form>
      </div>
    </main>
  );
}

I believe it's self-explanatory, First, we import our component, then we render it inside our form, which may be different for your own project.

Next, let's add some styles for our homepage, do the same open, and replace the content of the `src/app/page.module.scss` file with the following:

.container {
  margin: 0 auto;
  max-width: 480px;

  h1 {
    padding: 40px 0;
  }
}

While in the previous file upload article [How To Build A File Uploader With Next.Js And Formidable](https://codersteps.com/articles/how-to-build-a-file-uploader-with-next-js-and-formidable) we used the `formidable` npm package to parse our uploaded file, here we won't need any extra package instead we will also use `FormData` as you will see.

The new Next.js app directory routing introduced a new `route.ts` file that can be used to easily handle HTTP requests.

Just by exporting a function named for example `POST` when you want to handle a **POST** request to that endpoint.

We will need to install the `mime` and the `date-fns` npm packages, which will help us when generating our file name.

We will use the **mime** package to extract our file extension from the file mime-type.

And we will use the **date-fns** package to format today's date in order to group the uploaded files by day in a folder.

Go ahead and run `npm install mime date-fns` Once it's done installing, run `npm install -D @types/mime` to install the required types. 

In Next.js 13 with the app directory, we have access to the web request API which includes the formData object that we sent using the form we built in the previous section.

The formData object contains our file as a `Blob` which is all we need to save the uploaded file to our server disk.

In the previous section, we used the endpoint `api/upload` to upload our image, now we'll create that endpoint.

Let's create the upload handler file at: `src/app/api/upload/route.ts` with the following code, then we'll explore what each part does.

import mime from "mime";
import { join } from "path";
import { stat, mkdir, writeFile } from "fs/promises";
import * as dateFn from "date-fns";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const formData = await request.formData();

  const file = formData.get("file") as Blob | null;
  if (!file) {
    return NextResponse.json(
      { error: "File blob is required." },
      { status: 400 }
    );
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const relativeUploadDir = `/uploads/${dateFn.format(Date.now(), "dd-MM-Y")}`;
  const uploadDir = join(process.cwd(), "public", relativeUploadDir);

  try {
    await stat(uploadDir);
  } catch (e: any) {
    if (e.code === "ENOENT") {
      await mkdir(uploadDir, { recursive: true });
    } else {
      console.error(
        "Error while trying to create directory when uploading a file\n",
        e
      );
      return NextResponse.json(
        { error: "Something went wrong." },
        { status: 500 }
      );
    }
  }

  try {
    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
    const filename = `${file.name.replace(
      /\.[^/.]+$/,
      ""
    )}-${uniqueSuffix}.${mime.getExtension(file.type)}`;
    await writeFile(`${uploadDir}/${filename}`, buffer);
    return NextResponse.json({ fileUrl: `${relativeUploadDir}/${filename}` });
  } catch (e) {
    console.error("Error while trying to upload a file\n", e);
    return NextResponse.json(
      { error: "Something went wrong." },
      { status: 500 }
    );
  }
}

As mentioned before the `route.ts` allow us to handle HTTP verbs by exporting a function with the HTTP verb name that will be used as that HTTP verb handler.

Here we use the POST verb, so we export a POST function like `export async function POST(request: NextRequest) {..}` and it can be an `async` function.

After that, we extract our formData object from the request, that was passed to us by Next.js, then we get our uploaded file using `formData.get("file")`.

The key **file** should match the used key on the client form, then we're doing a simple validation, so in case we don't have a file we respond with a `400` code.

It's good to the **NextResponse** instead of just *Response* to avoid some typing issues, for example doing `Response.json({..})` is valid but causes a type issue.

And because we know that the file we're sending is a blog (`const file = fileInput.files[0];`) we type it using `Blob` or `null` in case no file was sent.

In order for us to save our **Blob file** to the disk we need to cast it to a Buffer, and for that, we use `const buffer = Buffer.from(await file.arrayBuffer());`.

I always like to organize the uploaded files into directories, a directory per day similar to my other article where we use the `Formidable` package.

**Note**: in this demonstration project, we will store the uploaded file under the public directory like `/public/uploads/...` which is fine when we run the app in development mode.

When our Next.js application runs on a production build, we should consider using a separate server to serve our uploads folder (like nginx using the `alias` to serve static files).

After we've converted our file to **Buffer** and generated our `uploadDir` path, it's time to make sure our **uploadDir** exists, if not we create it to avoid any access errors.

Now that we made sure we have a **Buffer file**, and an **upload directory**, we generate the final filename, and we use the `writeFile` from `fs/promises` to save our file to the uploads directory on disk.

Finally, we send back the url the newly saved file, and in case any unexpected exception occurs we just return a generic `500` error code, and we log to console the exception to help us with debugging.

try {
    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
    const filename = `${file.name.replace(
      /\.[^/.]+$/,
      ""
    )}-${uniqueSuffix}.${mime.getExtension(file.type)}`;
    await writeFile(`${uploadDir}/${filename}`, buffer);
    return NextResponse.json({ fileUrl: `${relativeUploadDir}/${filename}` });
  } catch (e) {
    console.error("Error while trying to upload a file\n", e);
    return NextResponse.json(
      { error: "Something went wrong." },
      { status: 500 }
    );
  }

At this point, you should have a fully functional file uploader based on the **Next.js app directory**, which can be used as a starting point for your own project.

Source code is available at: <a href="https://github.com/codersteps/nextjs_app_dir_file_uploader" rel="nofollow">https://github.com/codersteps/nextjs_app_dir_file_uploader</a>.

The next step is to extend your file uploader by building a [Next.Js File Upload Progress Bar Using Axios]

I hope this was helpful for you, see you at the next one 😉.

I will teach you how you can upload a file using the Next.js app directory and the new api handlers in the route.ts file with a practical step-by-step.

In this article, I want to share with you how I was able to upload a file easily to your server using Next.js with the new app directory.


To make it easy for you to follow, and be able to move what you learn here to other projects, we will build a simple form with file input and an image preview.


We will build a fully functioning image uploader using Next.js and the new <code>route.ts</code> file that comes with the new app directory.


The same principle that you'll learn here can apply to other files as well, file validation may differ but the same flow stays valid.


To make our project look a little nicer and not boring we will use CSS Modules that are already supported by Next.js we just need to install <code>sass</code> to be able to use <code>SCSS</code> instead of just <code>CSS</code>.


First, let's create a new Next.js project using the <code>--experimental-app</code> as described in the <a href="https://beta.nextjs.org/docs/installation">Beta Next.js Docs</a>.


Go ahead, open your terminal, and navigate to your workspace, then to create a new project run <code>npx create-next-app@latest --experimental-app</code>.


After running the <code>create-next-app</code> command it will prompt you with some simple questions that you may have already seen before, but what is important for us is to use TypeScript, and the <code>src/</code> directory.


Now it's time to open the newly created project, using your preferred code editor, for me it's <strong>vscode</strong> and I use <code>code nextjs_app_dir_file_uploader</code> to open my project from my terminal.


Let's install <strong>Sass</strong> by running <code>npm install -D sass</code>, then rename <code>src/app/page.module.css</code> to <code>src/app/page.module.scss</code> and also update the import inside the <code>src/app/page.tsx</code> file.


In this section, we will add a simple form to the homepage, it will have a placeholder image when no image is selected, and a preview of the selected image after it's been uploaded.


Once a file or image in our case is selected, we will validate the file, then we will send the file to the server, in case of success the server should respond with the <code>fileUrl</code> that we will use to preview the uploaded image.


As always I will share with you the code, then explain it to you step by step, go ahead and create a new component at <code>src/components/FileUploader.tsx</code> with the code below:


It's a simple component even if it looks a little large, we'll go through it step by step until it's clear to you what each part is about.


Let's start with the <code>use client</code> at the top, when using the app directory for routing every component by default is considered like a server component.


So in order to use functionalities that rely on javascript like hooks we need to add the <code>use client</code> to tell Next.js this is a client component.


Our new component simply returns an <code>&lt;Image .../&gt; to preview the uploaded image and a file </code>&lt;input .../&gt;` for us to be able to select a file, and as you may have noticed we're hiding it.


We wrap both elements inside a label, so when we click on the image we'll result into showing the browse file popup to select a file.


The main thing here is the <code>onImageFileChange</code> handler that runs after a file is selected, let's see what's going on inside that function.


First, we make sure that a valid file was selected, if no file was selected we just return and log a warning to the console.


Once we have a file, we create a <code>FormData</code> object and add our file to it, then we use the <code>formData</code> object to send our file to the server using <code>fetch</code> and the <code>/api/upload</code> endpoint that we will build next.


After we send the request to our upload api, we check if the response is <strong>ok</strong> if not we just log an error to the console and return (but you can always handle errors as fit to your project).


When we get a valid response with a <code>fileUrl</code> we use the <code>imageUrl</code> state to show the uploaded image preview.


Maybe you've noticed the <code>import styles from "./FileUploader.module.scss";</code> at the top, so let's add our component styles.


Create a new file at: <code>src/components/FileUploader.module.scss</code> and add the following to it.


Just some simple css styles to make our image responsive.


Before moving to the next section, where we will build the api endpoint to upload the file to the server, let's add our new component to the homepage, and see what it looks like.


Open the files <code>src/app/page.tsx</code> and replace its content with the following:


I believe it's self-explanatory, First, we import our component, then we render it inside our form, which may be different for your own project.


Next, let's add some styles for our homepage, do the same open, and replace the content of the <code>src/app/page.module.scss</code> file with the following:


While in the previous file upload article <a href="https://codersteps.com/articles/how-to-build-a-file-uploader-with-next-js-and-formidable">How To Build A File Uploader With Next.Js And Formidable</a> we used the <code>formidable</code> npm package to parse our uploaded file, here we won't need any extra package instead we will also use <code>FormData</code> as you will see.


The new Next.js app directory routing introduced a new <code>route.ts</code> file that can be used to easily handle HTTP requests.


Just by exporting a function named for example <code>POST</code> when you want to handle a <strong>POST</strong> request to that endpoint.


We will need to install the <code>mime</code> and the <code>date-fns</code> npm packages, which will help us when generating our file name.


We will use the <strong>mime</strong> package to extract our file extension from the file mime-type.


And we will use the <strong>date-fns</strong> package to format today's date in order to group the uploaded files by day in a folder.


Go ahead and run <code>npm install mime date-fns</code> Once it's done installing, run <code>npm install -D @types/mime</code> to install the required types.


In Next.js 13 with the app directory, we have access to the web request API which includes the formData object that we sent using the form we built in the previous section.


The formData object contains our file as a <code>Blob</code> which is all we need to save the uploaded file to our server disk.


In the previous section, we used the endpoint <code>api/upload</code> to upload our image, now we'll create that endpoint.


Let's create the upload handler file at: <code>src/app/api/upload/route.ts</code> with the following code, then we'll explore what each part does.


As mentioned before the <code>route.ts</code> allow us to handle HTTP verbs by exporting a function with the HTTP verb name that will be used as that HTTP verb handler.


Here we use the POST verb, so we export a POST function like <code>export async function POST(request: NextRequest) {..}</code> and it can be an <code>async</code> function.


After that, we extract our formData object from the request, that was passed to us by Next.js, then we get our uploaded file using <code>formData.get("file")</code>.


The key <strong>file</strong> should match the used key on the client form, then we're doing a simple validation, so in case we don't have a file we respond with a <code>400</code> code.


It's good to the <strong>NextResponse</strong> instead of just <em>Response</em> to avoid some typing issues, for example doing <code>Response.json({..})</code> is valid but causes a type issue.


And because we know that the file we're sending is a blog (<code>const file = fileInput.files[0];</code>) we type it using <code>Blob</code> or <code>null</code> in case no file was sent.


In order for us to save our <strong>Blob file</strong> to the disk we need to cast it to a Buffer, and for that, we use <code>const buffer = Buffer.from(await file.arrayBuffer());</code>.


I always like to organize the uploaded files into directories, a directory per day similar to my other article where we use the <code>Formidable</code> package.


<strong>Note</strong>: in this demonstration project, we will store the uploaded file under the public directory like <code>/public/uploads/...</code> which is fine when we run the app in development mode.


When our Next.js application runs on a production build, we should consider using a separate server to serve our uploads folder (like nginx using the <code>alias</code> to serve static files).


After we've converted our file to <strong>Buffer</strong> and generated our <code>uploadDir</code> path, it's time to make sure our <strong>uploadDir</strong> exists, if not we create it to avoid any access errors.


Now that we made sure we have a <strong>Buffer file</strong>, and an <strong>upload directory</strong>, we generate the final filename, and we use the <code>writeFile</code> from <code>fs/promises</code> to save our file to the uploads directory on disk.


Finally, we send back the url the newly saved file, and in case any unexpected exception occurs we just return a generic <code>500</code> error code, and we log to console the exception to help us with debugging.


At this point, you should have a fully functional file uploader based on the <strong>Next.js app directory</strong>, which can be used as a starting point for your own project.


Source code is available at: <a href="https://github.com/codersteps/nextjs_app_dir_file_uploader" rel="nofollow">https://github.com/codersteps/nextjs_app_dir_file_uploader</a>.


The next step is to extend your file uploader by building a [Next.Js File Upload Progress Bar Using Axios]


I hope this was helpful for you, see you at the next one 😉.


Building a File Uploader from scratch with Next.js app directory

I have just implemented a simple cookie consent banner on my website, and I want to share with you in this article how I've done it with a step-by-step guide.

The cookie consent banner is a way to inform your users how your website and the services it uses their browser cookies.

It does contain a link to your website privacy policy where they can learn in more detail how their personal data is stored and used.

Each website's policy is different, that's why you may need to change the content of the consent banner, as well as the type of action buttons your website needs.

In this article, we will use a fresh Next.js installation with TypeScript and Tailwind CSS, so it's easy for you to follow the same steps without getting lost in the project complexity.

You don't have to create a new Next.js project as long as you already have one, Luckily I already have an article that explains all about setting up a new project.

If you like to follow along, please go ahead and set up your project using the <a href="https://codersteps.com/articles/how-to-set-up-and-structure-your-full-stack-next-js-application">How To Set Up And Structure Your Full-Stack Next.Js Application</a> article.

Please skip the unnecessary sections for the purpose of this article, you can read up to the Tailwind CSS section by skipping the Google Fonts section.

I went ahead and did that myself, so now I have a fresh Next.js project with TypeScript and Tailwind CSS set up and ready to go.

In order to include the consent banner on all our public pages, we will need to create a shared layout that wraps all the pages we want the banner to show on.

We will create a simple layout that we will apply on the homepage and our privacy policy page, but for you, you may want to use a different approach that sweets your needs better.

You can learn more about how you can do that on the <a href="https://nextjs.org/docs/basic-features/layouts" rel="noopener noreferrer" target="_blank">Next.js Layouts</a> docs page.

Let's first, create a new file at `components/layouts/PublicLayout.tsx` and have it just add a simple header at the top and the footer at the bottom.

import Link from 'next/link'
import { ReactNode } from 'react'

export const Container = ({ children }: { children: ReactNode }) => (
  <div className="w-full max-w-5xl px-2 mx-auto md:px-4">{children}</div>
)

const PublicLayout = ({ children }: { children: ReactNode }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="flex items-center border-b border-gray-200 h-14">
        <Container>
          <nav>
            <ul>
              <li>
                <Link href="/">
                  <a className="text-sm font-medium text-center capitalize">
                    Home
                  </a>
                </Link>
              </li>
            </ul>
          </nav>
        </Container>
      </header>
      <main className="flex-grow">
        <Container>{children}</Container>
      </main>
      <footer className="py-5 border-t border-gray-200">
        <Container>
          <nav className="my-5">
            <ul>
              <li>
                <Link href="/privacy-policy">
                  <a className="text-sm font-medium text-center capitalize">
                    Privacy Policy
                  </a>
                </Link>
              </li>
            </ul>
          </nav>
        </Container>
        <Container>
          <p className="text-sm font-medium text-center capitalize">
            copyright © {new Date().getFullYear()} all rights reserved
          </p>
        </Container>
      </footer>
    </div>
  )
}

export default PublicLayout

As you can see this is a simplified not responsive `PublicLayout` example component, but it will serve us very well in this article.

At the top we declared a simple React component `Container` which we reuse it inside our layout component, it's just a simple div.

Then we added a simple header, main, and footer sections, we used `flex-col` and `flex-grow` to have the main section take the available height, in order to push the footer to the bottom.

Applying the public layout component to our public pages

Let's go ahead and have our homepage use the `PublicLayout` component

import Head from 'next/head'
import type { NextPage } from 'next'
import PublicLayout from '../components/layouts/PublicLayout'

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Next.js cookie consent banner</title>
        <meta
          name="description"
          content="A Next.js cookie consent banner with TypeScript and Tailwind CSS."
        />
      </Head>

      <PublicLayout>
        <h1 className="text-3xl font-bold font-open">
          Next.js cookie consent banner
        </h1>
      </PublicLayout>
    </>
  )
}

export default Home

We simply imported it and wrapped our content using it, now if we opened our homepage, we should see a header and a footer.

As we mentioned above we will link to the privacy policy page from the banner content. I know if you already own a website there's a high chance you already have it.

But I wanted to add it, so I can have a fully working example at the end of this article for you as a reference, as well as having a page link I can refer to.

I will go ahead and create a new file at `pages/privacy-policy.tsx` and a simple empty page with a title.

import Head from 'next/head'
import type { NextPage } from 'next'
import PublicLayout from '../components/layouts/PublicLayout'

const PrivacyPolicy: NextPage = () => {
  return (
    <>
      <Head>
        <title>Our Privacy Policy</title>
        <meta name="description" content="Website privacy policy page" />
      </Head>

      <PublicLayout>
        <h1 className="text-3xl font-bold font-open">
          Website privacy policy page content
        </h1>
      </PublicLayout>
    </>
  )
}

export default PrivacyPolicy

You may notice we have also wrapped its content with the `PublicLayout` component just like we did with the homepage.

It's time to create the main component that will display the cookie consent banner to the user. but first, let's install a single dependency that we will need to manage browser cookies.

The `js-cookie` npm package is a handy tool to set and get our browser cookies, and we need that to remember that a user has already accepted our consent.

To install it we will use the commands `npm i js-cookie` and `npm i --save-dev @types/js-cookie` for the package types.

CookieConsent component structuring and styling

Now we are ready to start with our component structure, content, and styling, we will have a fixed banned with standard content and a single button that says `"Got it"`.

Go ahead and create a file for our component at `components/banners/CookieConsent.tsx` and put the following.

import Link from 'next/link'
import { MouseEvent } from 'react'
import { Container } from '../layouts/PublicLayout'

const CookieConsent = () => {
  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    console.log('remember that I accept')
  }

  return (
    <section className="fixed bottom-0 left-0 w-full py-2 md:py-4">
      <Container>
        <div className="flex flex-col items-start px-5 py-3 space-y-2 bg-gray-200 md:flex-row md:space-y-0 md:items-stretch md:space-x-2">
          <div className="flex items-center flex-grow text-gray-900">
            <p className="text-sm font-medium">
              This site uses services that use cookies to deliver better
              experience and analyze traffic. You can learn more about the
              services we use at our{' '}
              <Link href="/privacy-policy">
                <a className="text-sm underline hover:text-lightAccent">
                  privacy policy
                </a>
              </Link>
              .
            </p>
          </div>
          <div className="flex items-center">
            <button
              className="p-3 text-sm font-bold text-white uppercase bg-gray-700 whitespace-nowrap"
              onClick={onClick}
            >
              Got it
            </button>
          </div>
        </div>
      </Container>
    </section>
  )
}

export default CookieConsent

I will assume that you know your way around CSS and Tailwind so I will focus on explaining the idea behind the styles instead of the actually applied styles.

We have added a simple fixed wrapper to the bottom, with a vertical padding, inside of it we have added a container which by default it has horizontal padding.

Inside the container, we added our banner saying that we use services that use the user's cookie and we give them a button to consent to it.

CookieConsent button action implementation

When the button is clicked, currently we just log to the console, but in this subsection, we will have it set a cookie with the key `cookie_consent_is_true` to `"true"` to mark a user as consented.

We will use the `js-cookie` package to easily do that, this package gives us two methods `set` and `get` which enable us to set a new cookie with `key=value` pairs.

Let's write the code first then explain it, go ahead and update the `CookieConsent` component to match the following changes.

import Link from 'next/link'
import Cookies from 'js-cookie'
import { MouseEvent, useCallback, useEffect, useState } from 'react'
import { Container } from '../layouts/PublicLayout'

const USER_CONSENT_COOKIE_KEY = 'cookie_consent_is_true'
const USER_CONSENT_COOKIE_EXPIRE_DATE = 365

const CookieConsent = () => {
  const [cookieConsentIsTrue, setCookieConsentIsTrue] = useState(true)

  useEffect(() => {
    const consentIsTrue = Cookies.get(USER_CONSENT_COOKIE_KEY) === 'true'
    setCookieConsentIsTrue(consentIsTrue)
  }, [])

  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()

    if (!cookieConsentIsTrue) {
      Cookies.set(USER_CONSENT_COOKIE_KEY, 'true', {
        expires: USER_CONSENT_COOKIE_EXPIRE_DATE,
      })
      setCookieConsentIsTrue(true)
    }
  }

  if (cookieConsentIsTrue) {
    return null
  }

  return (
    <section className="fixed bottom-0 left-0 w-full py-2 md:py-4">
      ...
    </section>
  )
}

export default CookieConsent

For a little best practice 😁 we declared two constants `USER_CONSENT_COOKIE_KEY` for the cookie key and `USER_CONSENT_COOKIE_EXPIRE_DATE` for the cookie expires property.

Then we created a new state for our user cookie consent value `cookieConsentIsTrue` we set it to be `true` by default.

Using the `useEffect` hook which runs once after the component has been mounted, we check if there's a cookie with the key `"cookie_consent_is_true"` and value `"true"`.

When the user clicks on the "Got it" button, we simply check if the `cookieConsentIsTrue` is not true, which means the cookie wasn't set before, if not then we set it with the right value and an expiration date of a single year.

Finally, before rendering our component we check if the user has already accepted, if yes we just return `null` which means the component won't be rendering anything.

That was it for our component but sure you can extend it to whatever extent your website needs, Now it's time to add it to our public layout.

This is simply importing the component and inserting it after our footer, where you put it doesn’t matter because we give it a fixed position.

// imports
import CookieConsent from '../banners/CookieConsent'

...

const PublicLayout = ({ children }: { children: ReactNode }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="flex items-center border-b border-gray-200 h-14">
        ...
      </header>
      <main className="flex-grow">
        <Container>{children}</Container>
      </main>
      <footer className="py-5 border-t border-gray-200">
        ...
      </footer>
      <CookieConsent />
    </div>
  )
}

export default PublicLayout

Now if we checked out our home and privacy policy pages, we should see a cookie consent banner appears.

And if we click on the "Got it" button it should disappear, even if we reload it won't show, because we set the cookie to mark the user as consented.

In this article, you have learned about how to add a cookie consent banner to your Next.js website with Tailwind CSS as our styling framework of choice.

Source code is available at: https://github.com/codersteps/nextjs_cookie_consent_banner.

That's it for this one, I hope it was helpful, see you in the next one 😉.

Learn how to add a cookie consent banner with Next.js and Tailwind CSS, and how to remember when a user has already accepted the cookie consent banner.

I have just implemented a simple cookie consent banner on my website, and I want to share with you in this article how I've done it with a step-by-step guide.


The cookie consent banner is a way to inform your users how your website and the services it uses their browser cookies.


It does contain a link to your website privacy policy where they can learn in more detail how their personal data is stored and used.


Each website's policy is different, that's why you may need to change the content of the consent banner, as well as the type of action buttons your website needs.


In this article, we will use a fresh Next.js installation with TypeScript and Tailwind CSS, so it's easy for you to follow the same steps without getting lost in the project complexity.


You don't have to create a new Next.js project as long as you already have one, Luckily I already have an article that explains all about setting up a new project.


If you like to follow along, please go ahead and set up your project using the <a href="https://codersteps.com/articles/how-to-set-up-and-structure-your-full-stack-next-js-application">How To Set Up And Structure Your Full-Stack Next.Js Application</a> article.


Please skip the unnecessary sections for the purpose of this article, you can read up to the Tailwind CSS section by skipping the Google Fonts section.


I went ahead and did that myself, so now I have a fresh Next.js project with TypeScript and Tailwind CSS set up and ready to go.


In order to include the consent banner on all our public pages, we will need to create a shared layout that wraps all the pages we want the banner to show on.


We will create a simple layout that we will apply on the homepage and our privacy policy page, but for you, you may want to use a different approach that sweets your needs better.


You can learn more about how you can do that on the <a href="https://nextjs.org/docs/basic-features/layouts" rel="noopener noreferrer" target="_blank">Next.js Layouts</a> docs page.


Let's first, create a new file at <code>components/layouts/PublicLayout.tsx</code> and have it just add a simple header at the top and the footer at the bottom.


As you can see this is a simplified not responsive <code>PublicLayout</code> example component, but it will serve us very well in this article.


At the top we declared a simple React component <code>Container</code> which we reuse it inside our layout component, it's just a simple div.


Then we added a simple header, main, and footer sections, we used <code>flex-col</code> and <code>flex-grow</code> to have the main section take the available height, in order to push the footer to the bottom.


Let's go ahead and have our homepage use the <code>PublicLayout</code> component


Codersteps
Is For Ambitious Learners

Learn it by doing it for Free with Practical step by step Series and Articles.

Featured Articles

Building a File Uploader from scratch with Next.js app directory

Codersteps

Next.js

How to add cookie consent banner with Next.js and Tailwind CSS

Codersteps

Next.js

Web Scraping magnet links from a website with cheerio and curl

Codersteps

JavaScript

Looking for something in particular?

Recent Articles

How to set up and structure your full-stack Next.js application

Next.js

How to add OpenGraph to your Next.js website

Next.js

How to add a Sitemap to your Next.js website

Next.js

How to add Google Analytics to your Next.js website

Next.js

Next.js file upload progress bar using Axios

Next.js

How to build a file uploader with Next.js and formidable

Next.js