NextJS getInitialProps读Cookie时appContext.ctx.req为undefined报错

getInitialProps是Next.js中双端执行的生命周期方法，两种运行场景下上下文对象结构不一致：

• 首次打开页面走服务端渲染时，上下文存在req对象，对应服务端收到的HTTP请求
• 客户端路由跳转、客户端渲染页面时，代码运行在浏览器环境，不存在服务端的req请求对象，直接读取appContext.ctx.req.headers.cookie会触发undefined报错。

增加运行环境判断，双端分别适配Cookie读取逻辑，修改后的_app.js代码如下：

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)
  let cookieInstance

  // 服务端环境：从请求头读取Cookie
  if (appContext.ctx.req) {
    cookieInstance = new Cookies(appContext.ctx.req.headers.cookie)
  } else {
    // 客户端环境：从浏览器document对象读取Cookie
    cookieInstance = new Cookies(document.cookie)
  }

  const accessPassword = cookieInstance.get(consts.SiteReadCookie) ?? ''
  appProps.pageProps.hasReadPermission = accessPassword === 'letmein'

  return { ...appProps }
}

export default MyApp

补充说明：如果使用Next.js 13+的App Router模式，推荐优先使用框架内置的cookies()API处理服务端Cookie读取，客户端场景可以直接使用js-cookie这类纯客户端库，从根源上避免双端运行的上下文差异问题。

内容的提问来源于stack exchange，提问作者Dark star