🍪 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

1npm i next-cookies-universal

Yarn

1yarn add next-cookies-universal

Usage

Initialize

1import Cookies from 'next-universal-cookies';
2
3const ServerCookies = Cookies('server');
4// or
5const ClientCookies = Cookies('client');

Client Component

1'use client';
2
3import Cookies from 'next-universal-cookies';
4
5const MyClientComponent = () => {
6  const cookies = Cookies('client');
7
8  const handleClick = () => {
9    cookies.set('my_token', 'my_token_value');
10  };
11
12  return (
13    <button onClick={handleClick}>
14      Click to set cookies
15    </button>
16  );
17};

Server Component

1import Cookies from 'next-universal-cookies';
2
3const MyServerComponent = async() => {
4  const cookies = Cookies('server');
5  const myToken = cookies.get('my_token');
6
7  const data = await fetch('http://your.endpoint', {
8    headers: {
9      Authentication: `Bearer ${myToken}`
10    }
11  }).then(response => response.json());
12
13  return (
14    <div>
15      <p>Cookies Value: <strong>{myToken}</strong></p>
16      <code>
17        {JSON.stringify(data)}
18      </code>
19    </div>
20  );
21};

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.

1import Cookies from 'next-universal-cookies';
2
3const MyServerComponent = async() => {
4  const cookies = Cookies('server');
5
6  /** you should not to do like this!
7   * please read Server Actions reference if you want to set the cookies through Server.
8   */
9  cookies.set('my_token', 'my_token_value');
10
11  const myToken = cookies.get('my_token');
12
13  return (
14    <div>
15      <p>Cookies Value: <strong>{myToken}</strong></p>
16      <code>
17        {JSON.stringify(data)}
18      </code>
19    </div>
20  );
21};

Server Actions

With Server Component

1import Cookies from 'next-cookies-universal';
2
3async function setFromAction(formData: FormData) {
4  'use server';
5
6  const cookies = Cookies('server');
7  cookies.set('my_token', formData.get('cookie-value'));
8}
9
10function Form() {
11  return (
12    <div>
13      <form action={setFromAction}>
14        <input type="text" name="cookie-value" />
15        <div>
16          <button type="submit">
17            Set Your cookies
18          </button>
19        </div>
20      </form>
21    </div>
22  );
23}

With Client Component

1/** action.ts */
2'use server';
3
4export async function setFromAction(formData: FormData) {
5  const cookies = Cookies('server');
6  cookies.set('my_token', formData.get('cookie-value'));
7}

1/** Form.tsx */
2'use client';
3import { setFromAction } from './action.ts';
4
5function Form() {
6  /** client logic */
7  return (
8    <div>
9      <form action={setFromAction}>
10        <input type="text" name="cookie-value" />
11        <div>
12          <button type="submit">
13            Set Your cookies
14          </button>
15        </div>
16      </form>
17    </div>
18  );
19}

API Reference

1/** parameter to initialize the Cookies() */
2export type ICookiesContext = 'server'|'client';
3
4/** both Cookies('client') and Cookies('server') implements this interface */
5export interface IBaseCookies {
6  set<T = string>(
7    key: string,
8    value: T,
9    options?: ICookiesOptions
10  ): void;
11
12  get<T = string>(key: string): T;
13
14  remove(key: string, options?: ICookiesOptions): void;
15
16  has(key: string): boolean;
17
18  clear(): void;
19}

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