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" , "w3wiki" ); } // Async function to delete the 'name' cookie async function deleteCookie() { "use server" ; cookies(). delete ( "name" ); } return ( <div> <h1>w3wiki | 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:
Contact Us