title: Nextjs - getting cookies value on _app init
body: <p>I need to get the cookies value on the first render. I get those in _app.tsx.
  Everything looks fine (render correctly the html) but I get the server/client mismatch warning because at the first render on Server, cookies are undefined and the value fall back to default value which is 0.
  On hydration, the value is picked from cookies and is displayed correctly.</p>
  <p>Could someone explain to me why is a problem that on the server the value is the default value (therefor why I get this warning) and what would be a better way to write this code?</p>
  <p>Here my _app.tsx</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import type { AppProps } from 'next/app'
  import { UserContext } from '../context/UserContext'
  require('es6-promise').polyfill()
  
  let cookieHelper
  if (typeof window !== 'undefined') {
    cookieHelper = require( '../helpers/_cookies' ) // This is a file written by us where we export const and get/set cookies func 
  }
  
  function ElliotApp ({ Component, pageProps }: AppProps) {
    useEffect(() =&gt; {
      import('../helpers/_cookies')
    }, [])
    
    const searchesFromCookies = cookieHelper?.get(cookieHelper?.COOKIE_NAME_SEARCH_COUNT) // this value is a string like '3'
    const userState = { 
      numOfSearches: searchesFromCookies || 0 
    }
    const [userContext, setUserContext] = useState(userState)
  
    useEffect(() =&gt; {
      cookieHelper?.set(cookieHelper?.COOKIE_NAME_SEARCH_COUNT, userContext.numOfSearches)
    }, [userContext])
  
    return (
      &lt;UserContext.Provider value={[userContext, setUserContext]}&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/UserContext.Provider&gt;
    )
  }
  
  export default ElliotApp
  </code></pre>
  <p>many thanks!</p>