🍪 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

Table of Contents

• 🍪 Cookies Universal for NextJS App Route
• Table of Contents
• Live Demo
• Getting Started
  • Install
    • NPM
    • Yarn
  • Usage
    • Initialize
    • Client Component
    • Server Component
    • Server Actions
      • With Server Component
      • With Client Component
• API Reference
• Publishing
• License
• Feedbacks and Issues
• Support
  • Global
  • Indonesia

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.

License

next-cookies-universal is freely distributable under the terms of the MIT license.

Feedbacks and Issues

Feel free to open issues if you found any feedback or issues on next-cookies-universal. And feel free if you want to contribute too! 😄

Support

Global

Indonesia

• Trakteer
• Karyakarsa

Built with ❤️ by Sutan Gading Fadhillah Nasution on 2023