# next-cookies

> get the cookies on both the client & server

Latest version **2.0.3** (published 2019-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-cookies
pnpm add next-cookies
yarn add next-cookies
bun add next-cookies
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2019-11-29 |
| First published | 2016-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 367 |
| Author | Matthew Mueller |
| Maintainers | mattmueller, nfriedly |
| Keywords | cookies, next.js, cookie, parser, json |

## Links

- npm: https://www.npmjs.com/package/next-cookies
- Repository: https://github.com/matthewmueller/next-cookies
- Homepage: https://github.com/matthewmueller/next-cookies#readme
- Issues: https://github.com/matthewmueller/next-cookies/issues
- npm.io page: https://npm.io/package/next-cookies

## Dependencies (1)

- [universal-cookie](https://npm.io/package/universal-cookie.md) ^4.0.2

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.0.3 (latest) — 2019-11-29
- 2.0.2 — 2019-11-20
- 2.0.1 — 2019-11-04
- 2.0.0 — 2019-11-02
- 1.1.3 — 2019-08-27
- 1.1.2 — 2019-02-25
- 1.1.1 — 2019-02-24
- 1.1.0 — 2019-02-11
- 1.0.4 — 2018-11-11
- 1.0.3 — 2018-10-18
- 1.0.2 — 2017-08-25
- 1.0.1 — 2016-12-30
- 1.0.0 — 2016-12-30

## README

# Next Cookies

[![Build Status](https://travis-ci.org/matthewmueller/next-cookies.svg?branch=master)](https://travis-ci.org/matthewmueller/next-cookies)

Tiny little function for getting cookies on both client & server with [next.js](https://nextjs.org).

This enables easy client-side and server-side rendering of pages that depend on cookies.

## Installation

```
yarn add next-cookies
```

or

```
npm install --save next-cookies
```


## Usage

### Read all cookies:

```js
const allCookies = cookies(ctx);
```

`allCookies` will be an object with keys for each cookie.

The `ctx` object is passed to your [`getInitialProps`](https://nextjs.org/docs#fetching-data-and-component-lifecycle) function by next.js.

JSON is parsed automatically, to disable this behavior pass an options object with `doNotParse` set to `true`:

```js
const allCookies = cookies(ctx, {doNotParse: true});
```

The options object is passed directly to the underlying [universal-cookie](https://www.npmjs.com/package/universal-cookie) library.

### Read a single cookie:

```js
const { myCookie } = cookies(ctx);
```
or 
```js
const myCookie = cookies(ctx).myCookie;
```

The `ctx` object is passed to your [`getInitialProps`](https://nextjs.org/docs#fetching-data-and-component-lifecycle) function by next.js.

### Set a cookie:

This library does not support setting cookies. However, this is how to do it in client-side code:

```js
document.cookie = `foo=bar; path=/`;
```

This sets a cookie named `foo` to the value `bar`. 

The `path` portion is optional but usually desired. 

An expiration date may be appended (see below), otherwise the cookie will be deleted whenever the browser is closed.

### Delete a cookie:

This library does not support deleting cookies. However, this is how to do it in client-side code:

```js
document.cookie = `foo=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`;
```

The value doesn't matter, although the `path` does. The expiration date must be in the past. 

## Complete Example

```js
import React from 'react'
import cookies from 'next-cookies'

class NameForm extends React.Component {
  static async getInitialProps(ctx) {
    return {
      initialName: cookies(ctx).name || ''
    }
  }

  constructor(props) {
    super(props);
    this.state = {name: props.initialName || ''};
    this.handleChange = this.handleChange.bind(this);
    this.reset = this.reset.bind(this);
  }

  handleChange(event) {
    const newName = event.target.value;
    this.setState({name: newName});
    document.cookie = `name=${newName}; path=/`;
  }

  reset() {
    this.setState({name: ''});
    document.cookie = 'name=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
  }

  render() {
    return (
      <div>
        <p>Hi {this.state.name}</p>
        <p>Change cookie: <input
            type="text"
            placeholder="Your name here"
            value={this.state.name}
            onChange={this.handleChange}
          />!
        </p>
        <p>Delete cookie: <button onClick={this.reset}>Reset</button></p>
      </div>
    );
  }
}

export default NameForm
```

See, also, the test app: https://github.com/matthewmueller/next-cookies/blob/master/tests/test-app/pages/cookies.js

## More Information

* https://www.npmjs.com/package/universal-cookie
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
* https://tools.ietf.org/html/rfc6265


## License

MIT

---
_Source: https://npm.io/package/next-cookies · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._