https://github.com/hc-oss/next-nookies-persist

🍪 ⚓ Next.js persist cookie data with hooks
https://github.com/hc-oss/next-nookies-persist

cookie cookies hacktoberfest localstorage nextjs persist persists-data preserve session ssr typescript

Last synced: 2 months ago
JSON representation

🍪 ⚓ Next.js persist cookie data with hooks

• Host: GitHub
• URL: https://github.com/hc-oss/next-nookies-persist
• Owner: hc-oss
• Created: 2019-11-19T21:05:07.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:17:40.000Z (about 2 years ago)
• Last Synced: 2024-05-01T15:59:07.373Z (9 months ago)
• Topics: cookie, cookies, hacktoberfest, localstorage, nextjs, persist, persists-data, preserve, session, ssr, typescript
• Language: TypeScript
• Homepage: https://next-nookies-persist-example.now.sh/
• Size: 2.26 MB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-nookies-persist

A simple easy to digest key-value based storage module wrapper for Next.js based on cookies that persists data on page reloads

[Example](https://next-nookies-persist-example.now.sh/)

[![GitHub Actions Status](https://github.com/harshzalavadiya/next-nookies-persist/workflows/NodeJS/badge.svg)](https://github.com/harshzalavadiya/next-nookies-persist/actions)

[![NPM](https://img.shields.io/npm/v/next-nookies-persist.svg)](https://npm.im/next-nookies-persist)

[![gzip](https://badgen.net/bundlephobia/minzip/next-nookies-persist)](https://bundlephobia.com/result?p=next-nookies-persist)

> as this package is written in TypeScript documentation is directly available as jsdoc/tsdoc intellisense

## ⚡ Features

- SSR Ready

- Store JSON Out of the box

- Lightweight

- Typed with TypeScript (works with JavaScript too)

## 🔧 Installation

```sh

npm i next-nookies-persist

```

## 📦 Usage

### Configure `pages/_app.js`

```jsx

import App from "next/app";

import React from "react";

import { NookiesProvider, parseNookies } from "next-nookies-persist";

export default class MyApp extends App {

  static async getInitialProps({ Component, ctx }) {

    return {

      pageProps: {

        nookies: parseNookies(ctx), // 👈

        ...(Component.getInitialProps

          ? await Component.getInitialProps(ctx)

          : {})

      }

    };

  }

  render() {

    const { Component, pageProps } = this.props;

    return (

       // 👈

        

      

    );

  }

}

```

### Use as a react hook inside component `pages/index.js`

```jsx

import React from "react";

import useStorage from "next-nookies-persist";

const Home = () => {

  const { nookies, setNookie, removeNookie } = useStorage();

  return (

    


      
{JSON.stringify(nookies, null, 2)}

       setNookie("foo", { bar: "baz" })}>Set

       removeNookie("foo")}>Clear

    

  );

};


export default Home;

```

![Demo](./example.gif)

## 🤠 Credits

- [Nookies](https://github.com/maticzav/nookies)

- [Rollup](https://github.com/rollup/rollup)

- [TypeScript](https://github.com/microsoft/TypeScript)

## 🙏 Contributing

Contributions/Suggestions are always welcome!

## 📄 License

MIT © [harshzalavadiya](https://github.com/harshzalavadiya)