React项目中Next.js会话管理：如何解决服务端渲染无法访问localStorage问题？

这是Next.js SSR场景下非常典型的问题——getInitialProps在首次加载时会在服务端执行，而服务端环境压根没有window对象，自然访问不了localStorage。我给你整理几个实用的解决思路：

1. 先判断环境，只在客户端访问localStorage #

既然服务端碰不到localStorage，那咱们就先区分环境，只在客户端环境下读取会话信息。你可以在getInitialProps里做判断，或者把会话读取逻辑放到客户端专属的生命周期里（比如useEffect）。

举个组件里的例子：

import { useEffect, useState } from 'react';

function MyPage() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    // useEffect 只在客户端执行，安全访问localStorage
    const savedSession = localStorage.getItem('user_session');
    if (savedSession) {
      setSession(JSON.parse(savedSession));
    }
  }, []);

  return <div>{session ? `欢迎回来，${session.username}` : '请登录'}</div>;
}

// 如果用getInitialProps，也要加环境判断
MyPage.getInitialProps = async (ctx) => {
  let session = null;
  // 只有在客户端时才读localStorage
  if (typeof window !== 'undefined') {
    session = JSON.parse(localStorage.getItem('user_session'));
  }
  return { session };
};

export default MyPage;

2. 改用Cookie存储会话（服务端可读取） #

如果你的会话需要在服务端渲染时就用到（比如页面内容需要根据会话动态生成），那localStorage就不合适了——服务端读不到它。这时候把会话存在Cookie里是更好的选择，因为服务端可以通过请求头拿到Cookie。

比如登录成功后把token存到Cookie：

// 登录接口回调里
document.cookie = `user_token=${token}; path=/; max-age=86400; SameSite=Lax`;

然后在getServerSideProps里解析Cookie（可以用cookie包简化解析）：

import cookie from 'cookie';

export async function getServerSideProps(ctx) {
  // 从请求头获取Cookie
  const cookies = cookie.parse(ctx.req.headers.cookie || '');
  const userToken = cookies.user_token;

  // 用token去后端验证会话，获取用户信息
  const session = userToken ? await verifyToken(userToken) : null;

  return { props: { session } };
}

3. 使用Auth.js（原NextAuth.js）简化认证流程 #

手动处理环境判断、Cookie解析这些细节容易出错，推荐直接用Auth.js这个专门为Next.js打造的认证库。它已经封装好了SSR/CSR场景下的会话同步，支持多种登录方式（邮箱、OAuth、自定义凭证），开箱即用。

比如基本配置后，你可以在任意组件里用useSession钩子获取会话，不管是服务端还是客户端渲染：

'use client'; // App Router下需要加这个指令
import { useSession } from 'next-auth/react';

function ProfilePage() {
  const { data: session, status } = useSession();

  if (status === 'loading') return <div>加载中...</div>;
  if (!session) return <div>请登录</div>;

  return <div>欢迎，{session.user.name}</div>;
}

export default ProfilePage;

4. App Router下的客户端组件专属逻辑（Next.js 13+） #

如果你用的是Next.js 13+的App Router，记得服务端组件是不能访问window的，所以把需要操作localStorage的会话逻辑放到客户端组件里（开头加'use client'指令），服务端组件则通过服务器端的会话数据来渲染内容，两者配合使用。

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