πͺ 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
- API Reference
- Publishing
- License
- Feedbacks and Issues
- Support
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
inpackage.json
is changed to newest version. Then runnpm install
for synchronize it topackage-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 thetag
name is same as theversion
inpackage.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
Built with