BETA v0.1.5

NextCookies.io Docs

1. Quick Start

Let's start by installing the required packages.

1.1. Create Cookie Banner

1.2. Install Packages

npm i nextcookiesio

1.3. Setup Wrapper

The NextCookiesIOWrapper component is a client-side component designed to render a cookie banner using the NextCookiesioBanner component from the nextcookiesio library. It receives cookie banner data as a prop and passes it to NextCookiesioBanner along with additional configuration options. It ensures that any necessary scripts associated with displaying the cookie banner are executed within the browser environment.


  "use client";

  import { NextCookiesioBanner } from "nextcookiesio";

  export default function NextCookiesIOWrapper(props: any) {
    const { cookieBannerData } = props;

    return (
      <NextCookiesioBanner bannerData={cookieBannerData} />
    );
  }


                

1.4. Fetch Banner Data

The NextCookiesIO component is a server-side component designed to fetch cookie banner data from the nextcookies.io API and pass it to the NextCookiesIOWrapper component as props. This approach ensures efficient data fetching and minimizes the risk of exhausting API rate limits.


  "use server";

  import NextCookiesIOWrapper from "./wrapper";

  export default async function NextCookiesIO() {

    const res = await fetch("https://nextcookies.io/api/cookiebanner/{YOUR_COOKIE_BANNER_ID}",
        { next: { revalidate: 1000 } }
      );

    const cookieBanner = await res.json();

    return <NextCookiesIOWrapper cookieBannerData={cookieBanner.data} />;
  }

                

1.5. Add Banner to RootLayout

The RootLayout component serves as the root layout for your application, wrapping its children components with common layout elements. It includes the integration of the NextCookiesIO component, allowing you to add the cookie banner to all pages of your application.



  import NextCookiesIO from "@/components/nextcookiesio";

  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      <html lang="en" >
        <body>
          <NextCookiesIO />
          {children}
        </body>
      </html>
    );
  }


                

1.6. Rate Limiting

To ensure fair use and maintain optimal performance for all users, our API enforces a rate limit of 100 requests per minute. This means that any application making more than 100 requests within a 60-second window will be temporarily blocked from making further requests until the rate limit resets. Please use the The NextCookiesIO component approach to ensures efficient data fetching and minimizes the risk of exhausting API rate limits.



NextCookies.io logoNextCookies.io v.0.1.5

The GDPR cookie consent banner for Next.js

Copyright © 2024 - All rights reserved

Max

Hey 👋 I am Max the creator of NextCookies.io.
You can follow my work on Instagram and YouTube