maticzav / Nookies
🍪 A set of cookie helpers for Next.js
Stars: ✭ 1,035
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Nookies
server-authentication-next.js
No description or website provided.
Stars: ✭ 103 (-90.05%)
Mutual labels: nextjs, zeit
React Keycloak
React/React Native/NextJS/Razzle components for Keycloak
Stars: ✭ 281 (-72.85%)
Mutual labels: hacktoberfest, nextjs
now-course
Proyecto para el curso de Now.sh en Platzi
Stars: ✭ 19 (-98.16%)
Mutual labels: nextjs, zeit
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-87.54%)
Mutual labels: hacktoberfest, nextjs
React Esi
React ESI: Blazing-fast Server-Side Rendering for React and Next.js
Stars: ✭ 537 (-48.12%)
Mutual labels: hacktoberfest, nextjs
Vulcan Next
The Next starter for GraphQL developers
Stars: ✭ 155 (-85.02%)
Mutual labels: hacktoberfest, nextjs
devdevdev
The next trendy apparel e-commerce store maybe?
Stars: ✭ 27 (-97.39%)
Mutual labels: nextjs, zeit
Semana Hacktoberfest
🔥 Semana Hacktoberfest na Lukin Co. —— Quer participar da semana Hacktoberfest? Nós preparamos um guia especial para você!
Stars: ✭ 84 (-91.88%)
Mutual labels: hacktoberfest, nextjs
Devlopr Jekyll
Build and Deploy your Static Site 🚀 using this beautiful Jekyll Framework/Theme built for Creatives
Stars: ✭ 309 (-70.14%)
Mutual labels: hacktoberfest, zeit
Covid19 Brazil Api
API com dados atualizados sobre o status do COVID-19 🦠
Stars: ✭ 300 (-71.01%)
Mutual labels: zeit, nextjs
Mdx Embed
Embed 3rd party media content in MDX - no import required 🧽
Stars: ✭ 119 (-88.5%)
Mutual labels: hacktoberfest, nextjs
Commercejs Nextjs Demo Store
Commerce demo store built for the Jamstack. Built with Commerce.js, Next.js, and can be one-click deployed to Netlify. Includes product catalog, categories, variants, cart, checkout, payments (Stripe) order confirmation, and printable receipts.
Stars: ✭ 737 (-28.79%)
Mutual labels: hacktoberfest, nextjs
Ngx Cookieconsent
Cookie 🍪 Consent module for Angular.
Stars: ✭ 120 (-88.41%)
Mutual labels: hacktoberfest, cookie
Next Seo
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Stars: ✭ 4,149 (+300.87%)
Mutual labels: hacktoberfest, nextjs
Nextjs Headless Wordpress
🔥 Nextjs Headless WordPress
Stars: ✭ 110 (-89.37%)
Mutual labels: hacktoberfest, nextjs
next-motion
page transitions with nextjs and framer motion api
Stars: ✭ 25 (-97.58%)
Mutual labels: nextjs, zeit
Next Build Id
Easily set your `next build` BUILD_ID to the latest git commit hash
Stars: ✭ 203 (-80.39%)
Mutual labels: zeit, nextjs
Next Go
Production ready blog + boilerplate for Next.js 3.X
Stars: ✭ 254 (-75.46%)
Mutual labels: zeit, nextjs
Sentry Javascript
Official Sentry SDKs for JavaScript. We're hiring https://grnh.se/ca81c1701us
Stars: ✭ 6,012 (+480.87%)
Mutual labels: hacktoberfest, nextjs
nookies 🍪
A collection of cookie helpers for Next.js
Features
- ✨ SSR support, for setter, parser and destroy
- ⚙️ Custom Express server support
- 🪶 super light
- 🛡 perfect for authentication
Setting and destroying cookies also works on server-side.
Quick start
yarn add nookies
You can play with the example code here.
ServerSide cookies
import nookies from 'nookies'
export default function Me() {
return <div>My profile</div>
}
export async function getServerSideProps(ctx) {
// Parse
const cookies = nookies.get(ctx)
// Set
nookies.set(ctx, 'fromGetInitialProps', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/',
})
// Destroy
// nookies.destroy(ctx, 'cookieName')
return { cookies }
}
Client-only Cookies
import { parseCookies, setCookie, destroyCookie } from 'nookies'
function handleClick() {
// Simply omit context parameter.
// Parse
const cookies = parseCookies()
console.log({ cookies })
// Set
setCookie(null, 'fromClient', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/',
})
// Destroy
// destroyCookie(null, 'cookieName')
}
export default function Me() {
return <button onClick={handleClick}>Set Cookie</button>
}
Custom Express server cookies
const express = require('express');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const { parseCookies, setCookie, destroyCookie } = require('nookies');
app.prepare()
.then(() => {
const server = express();
server.get('/page', (req, res) => {
// Notice how the request object is passed
const parsedCookies = parseCookies({ req });
// Notice how the response object is passed
setCookie({ res }, 'fromServer', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/page',
});
// destroyCookie({ res }, 'fromServer');
return handle(req, res);
});
);
Reference
For client side usage, omit the
ctx
parameter. You can do so by setting it to an empty object ({}
),null
orundefined
.
parseCookies(ctx, options)
or nookies.get(ctx, options)
-
ctx:
Next.js context
||(Express request object)
-
options:
-
decode:
a custom resolver function (default: decodeURIComponent)
-
decode:
setCookie(ctx, name, value, options)
or nookies.set(ctx, name, value, options)
Don't forget to end your response on the server with
res.send()
.
-
ctx:
(Next.js context)
||(Express request object)
- name: cookie name
- value: cookie value
-
options:
- domain
- encode
- expires
- httpOnly
- maxAge
- path
- sameSite
- secure
destroyCookie(ctx, name, options)
or nookies.destroy(ctx, 'token', options)
Don't forget to end your response on the server with
res.send()
. This might be the reason your cookie isn't removed.
-
ctx:
(Next.js context)
||(Express response object)
- name: cookie name
-
options:
- domain
- path
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].