Socket
Socket
Sign inDemoInstall

next-client-cookies

Package Overview
Dependencies
55
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    next-client-cookies

SSR and client support for Next.js v13 cookies (app directory)


Version published
Maintainers
1
Created

Readme

Source

Next.js Client Cookies

Client cookies with support for SSR on the newest Next.js 13 (app directory).

SSR are client components that can be rendered both on the client and server side. Server components are server only components that can only be rendered on the server side. This library can support all 3 cases and will give you everything you need to work with cookies on the client and server side.

Please note that Next.js currently does NOT support updating cookies on Server Components (only on Actions or Routes are allowed to make changes to cookies within the server). If you need to update cookies on the server, please switch to a Client Component. Client components can be rendered on the server side (via SSR) and will support also updating cookies via special dehydration mechanism implemented by this library.

Interface and client side implementation based on the js-cookie package.

Install

  1. Install the package:
npm add next-client-cookies
  1. On your app/layout.tsx file, add the CookiesProvider:
import { CookiesProvider } from 'next-client-cookies/server';

export default function RootLayout({ children }) {
  return (
    <CookiesProvider>
      {children}
    </CookiesProvider>
  );
}

Usage

Within a client side component

This will work BOTH on the client and server side for SSR.

'use client';

import { useCookies } from 'next-client-cookies';

const MyComponent = () => {
  const cookies = useCookies();

  return (
    <div>
      <p>My cookie value: {cookies.get('my-cookie')}</p>

      <button onClick={() => cookies.set('my-cookie', 'my-value')}>
        Set cookie
      </button>
      {' | '}
      <button onClick={() => cookies.remove('my-cookie')}>Delete cookie</button>
    </div>
  );
};

Within a server only component

Will produce the same Cookies interfaces using Next.js's cookies() helper.

import { getCookies } from 'next-client-cookies/server';

const MyComponent = () => {
  const cookies = getCookies();

  return (
    <div>
      <p>My cookie value: {cookies.get('my-cookie')}</p>
    </div>
  );
};

License

MIT

Keywords

FAQs

Last updated on 16 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc