next-cookie
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.0 • Public • Published

    next-cookie

    Cookie serializer and deserializer library for next.js.

    npm

    Installation

    $ npm install next-cookie
    

    Usage

    HOCs

    The cookies are read and write through ctx.cookie or this.props.cookie as follows:

    import { Cookie, withCookie } from 'next-cookie'
    
    interface State = {
      displayName: string
    }
    
    class IndexPage extends React.Component<{}, State> {
    
      static async getInitialProps(ctx) {
        const name = ctx.cookie.get('name')
    
        let displayName
        if (name) {
          displayName = name
        }
    
        return { displayName }
      }
    
      render() {
        const { cookie, displayName } = this.props
        const { name } = this.state
    
        return (
          <div>
            { displayName ? (
            <p>Display name: { displayName }</p>
            ) : (
            <div>
              <input type="text" name="name" onChange={ e => this.setState({ name: e.target.value }) } />
              <a onClick={ () => {
                cookie.set('name', name)
              } }>Store name to cookie</a>
            </div>
            ) }
          </div>
        )
      }
    }
    
    export default withCookie(IndexPage)

    Hooks

    The useCookie returns cookie instance.

    import { useCookie } from 'next-cookie'
    import React, { useState } from 'react'
    
    export default props => {
      const cookie = useCookie(props.cookie)
      const [name, setName] = useState(cookie.get('name') || '')
    
      const onSubmit = (e) => {
        e.preventDefault();
    
        cookie.set('name', name)
    
        setName('')
      }
    
      const onChangeInput = (e) => {
        setName(e.target.value)
      }
    
      return (
        <div>
          { cookie.has('name') ? (
          <p>Display name: { cookie.get('name') }</p>
          ) : (
          <form onSubmit={onSubmit}>
            <input
              type="text"
              name="name"
              value={name}
              onChange={onChangeInput} />
            <button type="submit">Store name to cookie</button>
          </form>
          ) }
        </div>
      )
    }
    
    export function getServerSideProps(context) {
      const cookie = useCookie(context)
    
      cookie.set('getServerSideProps', 'This value is set by getServerSideProps.')
    
      return {
        props: {
          cookie: context.req.headers.cookie || ''
        }
      }
    }

    API Routes

    import { Cookie } from 'next-cookie'
    
    const COOKIE_KEY = "test_cookie";
    
    export default function handler(req, res) {
      
      //-- Simply pass in both the request and response objects to read and write cookies
      const cookie = Cookie.fromApiRoute(req, res);
      
      const cookieVal = cookie.get(COOKIE_KEY);
      
      if (cookieVal) {
        res.status(200).json({ priorCookieValue: cookie.get(COOKIE_KEY) });
      } else {
        cookie.set(COOKIE_KEY, "Cookie Value");
        res
          .status(200)
          .json({ cookieValue: cookie.get(COOKIE_KEY), justSet: true });
      }
    }
    

    License

    next-cookie is licensed under MIT License.
    See LICENSE for more information.

    Install

    npm i next-cookie

    DownloadsWeekly Downloads

    5,520

    Version

    2.8.0

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • tokuda109