Next-cookies-universal NPM

🍪 Cookies Universal for NextJS App Route

An utility that can help you to handle the Cookies in NextJS App Route with every context (both Server or Client) 🍪🔥

All supported to NextJS App Route

✅ Server Component and Server Actions Based on next/headers cookies
✅ Client Component Based on js-cookie

Live Demo

You can see Live Demo here

Getting Started

Install

NPM

npm i next-cookies-universal

Yarn

yarn add next-cookies-universal

Usage

Initialize

import Cookies from 'next-universal-cookies';

const ServerCookies = Cookies('server');
// or
const ClientCookies = Cookies('client');

Client Component

'use client';

import Cookies from 'next-universal-cookies';

const MyClientComponent = () => {
  const cookies = Cookies('client');

  const handleClick = () => {
    cookies.set('my_token', 'my_token_value');
  };

  return (
    <button onClick={handleClick}>
      Click to set cookies
    </button>
  );
};

Server Component

import Cookies from 'next-universal-cookies';

const MyServerComponent = async() => {
  const cookies = Cookies('server');
  const myToken = cookies.get('my_token');

  const data = await fetch('http://your.endpoint', {
    headers: {
      Authentication: `Bearer ${myToken}`
    }
  }).then(response => response.json());

  return (
    <div>
      <p>Cookies Value: <strong>{myToken}</strong></p>
      <code>
        {JSON.stringify(data)}
      </code>
    </div>
  );
};

Note: if you want to set cookies in Server, you not to allowed to set it on Server Component, you should do that in Server Actions.

import Cookies from 'next-universal-cookies';

const MyServerComponent = async() => {
  const cookies = Cookies('server');

  /** you should not to do like this!
   * please read Server Actions reference if you want to set the cookies through Server.
   */
  cookies.set('my_token', 'my_token_value');

  const myToken = cookies.get('my_token');

  return (
    <div>
      <p>Cookies Value: <strong>{myToken}</strong></p>
      <code>
        {JSON.stringify(data)}
      </code>
    </div>
  );
};

Server Actions

With Server Component

import Cookies from 'next-cookies-universal';

async function setFromAction(formData: FormData) {
  'use server';

  const cookies = Cookies('server');
  cookies.set('my_token', formData.get('cookie-value'));
}

function Form() {
  return (
    <div>
      <form action={setFromAction}>
        <input type="text" name="cookie-value" />
        <div>
          <button type="submit">
            Set Your cookies
          </button>
        </div>
      </form>
    </div>
  );
}

With Client Component

/** action.ts */
'use server';

export async function setFromAction(formData: FormData) {
  const cookies = Cookies('server');
  cookies.set('my_token', formData.get('cookie-value'));
}

/** Form.tsx */
'use client';
import { setFromAction } from './action.ts';

function Form() {
  /** client logic */
  return (
    <div>
      <form action={setFromAction}>
        <input type="text" name="cookie-value" />
        <div>
          <button type="submit">
            Set Your cookies
          </button>
        </div>
      </form>
    </div>
  );
}

API Reference

/** parameter to initialize the Cookies() */
export type ICookiesContext = 'server'|'client';

/** both Cookies('client') and Cookies('server') implements this interface */
export interface IBaseCookies {
  set<T = string>(
    key: string,
    value: T,
    options?: ICookiesOptions
  ): void;

  get<T = string>(key: string): T;

  remove(key: string, options?: ICookiesOptions): void;

  has(key: string): boolean;

  clear(): void;
}

for ICookiesOptions API, we use CookieSerializeOptions from DefinetlyTyped

Publishing

Before pushing your changes to Github, make sure that version in package.json is changed to newest version. Then run npm install for synchronize it to package-lock.json
After your changes have been merged on branch main, you can publish the packages by creating new Relase here: https://github.com/gadingnst/next-cookies-universal/releases/new
Create new tag, make sure the tag name is same as the version in package.json.
You can write Release title and notes here. Or you can use auto-generated release title and notes.
Click Publish Release button, then wait the package to be published.