Next.js 13 App Router构建报错：sessionStorage未定义及组件疑问

问题根源 #

你遇到的构建错误ReferenceError: sessionStorage is not defined，核心原因在于：

• Next.js 13 App Router中，page.js默认是服务器组件，服务器端环境不存在window、sessionStorage这类浏览器专属API。
• 即使你将page.js设为客户端组件，若在组件顶层直接访问sessionStorage，构建时的预渲染阶段（服务器端执行）仍会触发错误——客户端组件也会经历服务器端预渲染，只有在浏览器端运行时才能安全访问浏览器API。

关于page.js的组件类型问题 #

1. page.js是否必须为服务器组件？ #

不是。Next.js 13 App Router中，page.js默认是服务器组件，但你可以通过在文件最顶部添加'use client'指令，将其明确标记为客户端组件。

2. 构建时page.js会被视为服务器组件吗？ #

构建时Next.js会依据'use client'指令判断：

• 未添加'use client'的page.js，会被当作服务器组件处理，完全在服务器端执行，无法访问浏览器API。
• 添加了'use client'的page.js，会被识别为客户端组件，但仍会进行服务器端预渲染，仅在浏览器端运行时才能安全访问sessionStorage等浏览器API。

解决方法 #

步骤1：标记客户端组件 #

确保所有需要访问sessionStorage的page.js文件最顶部添加'use client'指令：

'use client'
// 后续组件代码

步骤2：安全访问sessionStorage #

不要在组件顶层直接访问sessionStorage，需在浏览器环境下执行相关逻辑，推荐两种方式：

方式一：使用useEffect钩子

useEffect的回调函数仅在浏览器端执行：

'use client'
import { useEffect, useState } from 'react'

export default function DashboardPage() {
  const [jwtToken, setJwtToken] = useState(null)

  useEffect(() => {
    // 仅在浏览器端执行
    const token = sessionStorage.getItem('jwt')
    setJwtToken(token)
  }, [])

  return (
    <div>
      {jwtToken ? `当前令牌：${jwtToken.slice(0, 10)}...` : '未登录'}
    </div>
  )
}

方式二：判断浏览器环境

通过typeof window !== 'undefined'判断当前运行环境：

'use client'

export default function ProfilePage() {
  let jwtToken = null
  // 仅在浏览器环境下访问sessionStorage
  if (typeof window !== 'undefined') {
    jwtToken = sessionStorage.getItem('jwt')
  }

  return <div>{jwtToken ? '已登录' : '请登录'}</div>
}

内容的提问来源于stack exchange，提问作者Abhith Shaji