Skip to content
Roboto Studio / evidence

youtube / video

The best Next.js cookie bar

Jono AlfordOriginal source ↗

Original video

About this video

It's Inth and c15t, it's fast, it's open source, it's everything we could have dreamed of and more. Here's the best cookie bar for Next.js.

Full transcript

Edited transcript from the original Roboto page

Hey folks, how's it going? I want to do this video today because I really want to talk about this thing, uh, just over here. This is, uh, C-15T, and more specifically it's C-15T hosted on consent.io. Um, it's an incredible cookie bar. Um, I don't think most people know it even exists. I didn't know it existed, and I am so stoked to actually talk about it.

Um, so one of the first things that you'll notice is this is styled perfectly like the rest of the Robboto Studio website. It's fully, fully customizable. We're using Tailwind CSS to style this, but you can do whatever you want. If you want to use styled components, if you want to use Tailwind, whatever it is, it works great.

Soon as you see, uh, this load up, I'll show you how fast this thing is, by the way. So just with a refresh, obviously you probably want to do a full refresh. So feel free to go visit the website and see for yourself. Um, but you can see it's ludicrously fast. It loads up in like 100 milliseconds.

Um, talking about that, there is a website called cookiebench.com which tells you the best performing cookies and the worst performing cookies, which is the ones that we always have to implement and it drives us crazy because you hate going from like a 100 out of 100 on a performance score to dropping down to, like, literally in some cases, you know, 80, 70, just from the cookie banner. So really, really cool tool.

Um, so again, the hosting side of this is consent. Feel free to have a look over there. Look at that beautiful logo on the bottom as well. Um, but they're using, you can see how well they've actually customized this themselves. Totally different from what we're using.

Um, and again, C-15T, this is the coolest bit if you want my honest opinion. Um, the entire setup for our website was literally step one. We didn't need to do database migrations. We literally ran this tool and it did everything. The only thing that caught us out when we were building was we forgot to put the environmental variable in, which is, you know, everybody does it. Schoolboy error.

But we're using PMP. So feel free to use this with Turbo Start Sanity, Turbo Start Contempt, whatever tool you want to use. Obviously, they're the best tools, but feel free. Um, I just want to tell people about it. It's awesome. I haven't been sponsored to say this. I love it. Take care. Have a great day.

Read timestamped source captions

0:02Hey folks, how's it going? I want to do

0:02Hey folks, how's it going? I want to do this video today because I really want

0:04this video today because I really want

0:04this video today because I really want to talk about this thing uh just over

0:06to talk about this thing uh just over

0:06to talk about this thing uh just over here. This is uh C-15T and more

0:09here. This is uh C-15T and more

0:09here. This is uh C-15T and more specifically it's C15T hosted on

0:11specifically it's C15T hosted on

0:11specifically it's C15T hosted on consent.io.

0:13consent.io.

0:13consent.io. Um it's an incredible cookie bar. Um I

0:15Um it's an incredible cookie bar. Um I

0:15Um it's an incredible cookie bar. Um I don't think most people know it even

0:17don't think most people know it even

0:17don't think most people know it even exists. I didn't know it existed and I

0:19exists. I didn't know it existed and I

0:19exists. I didn't know it existed and I am so stoked to actually talk about it.

0:21am so stoked to actually talk about it.

0:21am so stoked to actually talk about it. Um so one of the first things that

0:22Um so one of the first things that

0:22Um so one of the first things that you'll notice is this is styled

0:24you'll notice is this is styled

0:24you'll notice is this is styled perfectly like the rest of the Robboto

0:26perfectly like the rest of the Robboto

0:26perfectly like the rest of the Robboto Studio website. It's fully fully

0:28Studio website. It's fully fully

0:28Studio website. It's fully fully customizable. We're using Tailwind CSS

0:30customizable. We're using Tailwind CSS

0:30customizable. We're using Tailwind CSS to style this, but you can do whatever

0:32to style this, but you can do whatever

0:32to style this, but you can do whatever you want. If you want to use styled

0:33you want. If you want to use styled

0:33you want. If you want to use styled components, if you want to use Tailwind,

0:35components, if you want to use Tailwind,

0:35components, if you want to use Tailwind, whatever it is, it works great. Soon as

0:37whatever it is, it works great. Soon as

0:37whatever it is, it works great. Soon as you see uh this this load up, I'll show

0:38you see uh this this load up, I'll show

0:38you see uh this this load up, I'll show you how fast this thing is, by the way.

0:40you how fast this thing is, by the way.

0:40you how fast this thing is, by the way. So, just with a refresh, obviously, you

0:41So, just with a refresh, obviously, you

0:41So, just with a refresh, obviously, you probably want to do a full refresh. So,

0:43probably want to do a full refresh. So,

0:43probably want to do a full refresh. So, feel free to go visit the website and

0:44feel free to go visit the website and

0:44feel free to go visit the website and see for yourself. Um, but you can see

0:46see for yourself. Um, but you can see

0:46see for yourself. Um, but you can see it's ludicrously fast. It loads up in

0:48it's ludicrously fast. It loads up in

0:48it's ludicrously fast. It loads up in like 100 milliseconds. Um, talking about

0:51like 100 milliseconds. Um, talking about

0:51like 100 milliseconds. Um, talking about that, there is a website called

0:52that, there is a website called

0:52that, there is a website called cookiebench.com which tells you the best

0:55cookiebench.com which tells you the best

0:55cookiebench.com which tells you the best performing cookies and the worst

0:57performing cookies and the worst

0:57performing cookies and the worst performing cookies, which is the ones

0:58performing cookies, which is the ones

0:58performing cookies, which is the ones that we always have to implement and it

0:59that we always have to implement and it

0:59that we always have to implement and it drives us crazy because you hate going

1:01drives us crazy because you hate going

1:01drives us crazy because you hate going from like a 100 out of 100 on a

1:03from like a 100 out of 100 on a

1:03from like a 100 out of 100 on a performance score to dropping down to

1:05performance score to dropping down to

1:05performance score to dropping down to like literally in some cases, you know,

1:06like literally in some cases, you know,

1:06like literally in some cases, you know, 80 70 just from the cookie banner. So,

1:0980 70 just from the cookie banner. So,

1:0980 70 just from the cookie banner. So, really, really cool tool. Um, so again,

1:11really, really cool tool. Um, so again,

1:11really, really cool tool. Um, so again, the hosting side of this is consent.

1:14the hosting side of this is consent.

1:14the hosting side of this is consent. Feel free to have a look over there.

1:15Feel free to have a look over there.

1:15Feel free to have a look over there. Look at that beautiful logo on the

1:17Look at that beautiful logo on the

1:17Look at that beautiful logo on the bottom as well. Um, but they're using,

1:18bottom as well. Um, but they're using,

1:18bottom as well. Um, but they're using, you can see how well they've actually

1:20you can see how well they've actually

1:20you can see how well they've actually customized this themselves. Totally

1:21customized this themselves. Totally

1:22customized this themselves. Totally different from what we're using. Um, and

1:24different from what we're using. Um, and

1:24different from what we're using. Um, and again, C-15, this is the coolest bit if

1:26again, C-15, this is the coolest bit if

1:26again, C-15, this is the coolest bit if you want my honest opinion. Um, the

1:27you want my honest opinion. Um, the

1:27you want my honest opinion. Um, the entire setup for our website was

1:29entire setup for our website was

1:29entire setup for our website was literally step one. We didn't need to do

1:32literally step one. We didn't need to do

1:32literally step one. We didn't need to do database migrations. We literally ran

1:34database migrations. We literally ran

1:34database migrations. We literally ran this tool and it did everything. The

1:36this tool and it did everything. The

1:36this tool and it did everything. The only thing that caught us out when we

1:38only thing that caught us out when we

1:38only thing that caught us out when we were building was we forgot to put the

1:39were building was we forgot to put the

1:39were building was we forgot to put the environmental variable in, which is, you

1:41environmental variable in, which is, you

1:42environmental variable in, which is, you know, everybody does it. School boy

1:43know, everybody does it. School boy

1:43know, everybody does it. School boy error. But we're using PMP. So feel free

1:46error. But we're using PMP. So feel free

1:46error. But we're using PMP. So feel free to use this with Turbo Start Sanity,

1:48to use this with Turbo Start Sanity,

1:48to use this with Turbo Start Sanity, Turbo Start Contempt, whatever tool you

1:50Turbo Start Contempt, whatever tool you

1:50Turbo Start Contempt, whatever tool you want to use. Obviously, they're the best

1:51want to use. Obviously, they're the best

1:52want to use. Obviously, they're the best tools, but feel free. Um, I just want to

1:54tools, but feel free. Um, I just want to

1:54tools, but feel free. Um, I just want to tell people about it. It's awesome. I

1:55tell people about it. It's awesome. I

1:55tell people about it. It's awesome. I haven't been sponsored to say this. I

1:57haven't been sponsored to say this. I

1:57haven't been sponsored to say this. I love it. Take care. Have a great day.

Questions answered

Editorial answers from the original Roboto page.

What is c15t?

c15t is an open-source cookie consent and banner library for modern web apps. It ships with sensible styling defaults but is fully customizable, so you can use Tailwind, styled-components, or your own setup. Inth (https://inth.com/) is the hosted version of c15t, which is the easiest way to use it in production.

Read the original ↗
What is the best cookie banner for Next.js?

c15t hosted on Inth is the recommendation here. It's open source, loads in roughly 100ms, integrates as a single setup step (no database migrations), and matches whatever styling system your Next.js app already uses. Performance is what sets it apart: most cookie banners noticeably tank Lighthouse scores, and this one barely moves the needle.

Read the original ↗
What is Inth?

Inth (https://inth.com/) is the hosted product behind the c15t open-source library, previously known as consent.io. You get the same banner and consent flow without running the back end yourself. Connect it to your Next.js (or other) app, drop in an environment variable, and the banner is live. The styling is fully customizable so it doesn't look like an off-the-shelf widget.

Read the original ↗
Is c15t open source?

Yes. c15t is open source, and Inth is the hosted commercial offering built on top of it. You can self-host the open-source library or pay for the managed version, depending on whether you want to run the consent storage and dashboard yourself.

Read the original ↗
How fast is the c15t cookie banner?

Around 100 milliseconds to render, based on the demo in the video. That matters because most cookie banners are responsible for noticeable performance drops; going from a Lighthouse score of 100 to 70-80 just because of the banner is common. c15t is designed to avoid that, which is why cookiebench.com is a useful place to compare options.

Read the original ↗
How do you add a cookie banner to a Next.js app?

With c15t and Inth it's a single install step plus an environment variable. There are no database migrations to run, and the library works out of the box with Tailwind, styled-components, or whatever else your project uses. The hardest part is remembering to set the environment variable, which is the one thing that tripped Roboto Studio up during their setup.

Read the original ↗
Does c15t handle GDPR?

Yes. c15t is designed around modern consent requirements (GDPR, CCPA), and Inth stores the consent records on your behalf if you want a managed setup. You still need a cookie policy on your site, but the banner, opt-in/opt-out flow, and consent storage are what c15t handles for you.

Read the original ↗

Scope and context

  • Video authors are credited by the original Roboto page; individual transcript speakers remain unassigned.