NextJS中如何正确保存购物车会话？解决localStorage未定义报错

问题原因 #

你碰到的ReferenceError: localStorage is not defined，是因为NextJS支持服务端渲染（SSR）/静态生成（SSG）——在服务器端执行组件代码时，不存在浏览器环境的localStorage对象，直接在钩子顶层访问就会触发报错。

修复方案：仅在客户端环境访问localStorage #

修改你的useCartItems钩子，通过useEffect在客户端初始化和持久化数据——useEffect只会在浏览器端执行，完全避开服务器端环境：

import { useState, useEffect } from 'react';

export function useCartItems() {
  const [cartItems, setCartItems] = useState([]);

  // 客户端初始化：从localStorage加载购物车数据
  useEffect(() => {
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
      try {
        setCartItems(JSON.parse(savedCart));
      } catch (err) {
        console.error('购物车数据解析失败:', err);
        localStorage.removeItem('cart'); // 清除损坏的缓存
      }
    }
  }, []);

  // 购物车变更时同步到localStorage
  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cartItems));
  }, [cartItems]);

  // 添加商品方法
  const addItem = (item) => {
    setCartItems(prev => [...prev, item]);
  };

  // 可按需添加删除、更新商品的方法
  const removeItem = (itemId) => {
    setCartItems(prev => prev.filter(item => item.id !== itemId));
  };

  return { cartItems, addItem, removeItem };
}

额外优化建议 #

• 处理数据异常：加入try-catch捕获JSON解析错误，避免因localStorage数据损坏导致页面崩溃，同时清除无效缓存。
• App Router 适配：如果使用NextJS 13+ App Router，需要在使用该钩子的组件或钩子文件顶部添加'use client'指令，确保代码在客户端执行：

  'use client'; // 放在文件最顶部
  import { useState, useEffect } from 'react';
  
  // 后续钩子代码...
  

• 跨设备同步需求：如果需要用户在不同设备同步购物车，仅靠localStorage不够，需要配合后端会话（比如通过API将购物车数据存在用户账户或服务端session中）。

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