cookies in Next JS

Next.js provides a cookies function that allows you to store small pieces of data on the client side. It provides methods to store, delete, components and retrieve the cookie. cookies function can only used in server components. To store and delete the cookie at the client side using the cookies function you can only store and delete the cookie by using Server Action or Route Handler.

Syntax:

import { cookies } from 'next/headers'

function MyComponent() {

  const cookieStore = cookies()
  const name = cookieStore.get('cookie_name').value;

  return (
     ...
  );
}

cookies() methods:

• cookies().get(‘cookie_name’): It will return cookies as an object with name and value.
• cookies().getAll(): It will returns an array object of all cookies returned with name and value.
• cookies().has(‘cookie_name’): It will return a Boolean value based on whether the cookie exists (true) or not (false).
• cookies().set(name, value, options): It is used to set the cookie.
• cookies().delete(‘cookie_name’): It is used to delete the cookie.

Creating Next.js Application

Step 1: Create a Next.js application using the following command.

npx create-next-app@latest gfg

Step 2: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Project Structure:

Example: The below example demonstrates the use of Cookies functions.

In this example, we are using Server Action to store and delete the cookies and display it on server component. we have defined the cookie store and delete function at server component and passing this functions to the client component through props and we will make the action from client component through Form(button) submit

Note: Remove the included css file from layout.js file.

Step 1: Add this following code inside page.js file

Javascript

// File path: src/app/page.js
import { cookies } from "next/headers";
import AddCookiebtn from "@/app/Actionbutton";

export default async function Home() {
    // Fetching the 'name' cookie value or setting a default value
    const cookieStore = cookies();
    const name = cookieStore.get("name")
        ? cookieStore.get("name").value
        : "set the cookie";

    // Async function to create a 'name' cookie
    async function createCookie() {
        "use server";
        cookies().set("name", "GeeksForGeeks");
    }

    // Async function to delete the 'name' cookie
    async function deleteCookie() {
        "use server";
        cookies().delete("name");
    }

    return (
        <div>
            <h1>GeeksForGeeks | Cookie Example</h1>
            <h2>Cookie value: {name}</h2>
            {/* Rendering the AddCookiebtn component and
                passing create and delete functions as a props */}
            <AddCookiebtn create={createCookie} delete={deleteCookie} />
        </div>
    );
}

Step 2: Create Actionbutton.js file and add this following code inside that file.

Javascript

//File path: src/app/Actionbutton.js
// 'use client' indicates that this is client component
'use client';

const Page = (props) => {
    return (
        <>
            {/* Form for setting a cookie */}
            <form action={props.create}>
                <button type="submit">Set Cookie</button>
            </form>

            <br />

            {/* Form for deleting a cookie */}
            <form action={props.delete}>
                <button type="submit">Delete Cookie</button>
            </form>
        </>
    );
}

export default Page;

To run the Application open the terminal in the project folder and enter the following command:

npm run dev

Output: