NextJS undefined appContext.ctx.req.headers on Cookies

I want to store my portfolio password in browser cookies. I added the following code to my _app.js now when visiting the not normal pages I'm getting an error. I don't understand what I have done wrong.

import App from 'next/app'
import Cookies from 'universal-cookie'
import consts from '../consts'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const cookies = new Cookies(appContext.ctx.req.headers.cookie)
  const password = cookies.get(consts.SiteReadCookie) ?? ''
  if (password === 'letmein') {
    appProps.pageProps.hasReadPermission = true
  }

  return { ...appProps }
}

export default MyApp

Error