# next--e-commerce

**Repository Path**: sunmeng123/next--e-commerce

## Basic Information

- **Project Name**: next--e-commerce
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: starter
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-18
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
## Lucide Icons

pnpm install lucide-react

## Categories 组件 必须是客户端组件（"use client"）
```tsx
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
```
- 这三个 Hook（useSearchParams, useRouter, usePathname）只能在客户端组件中使用。
- 它们依赖浏览器的 window.location 和 History API，在服务器上无法运行。


##  ProductCard 组件 必须是客户端组件（"use client"）
- 服务端组件无法维护状态。useState 是 React 客户端 Hook，只能在浏览器中运行。
- 用户切换尺码或颜色时，需要实时更新 UI，这依赖于组件内部的状态
📌 Next.js 规则：任何使用 useState, useEffect, useRef 等 React 客户端 Hook 的组件，必须标记为 "use client"。

```tsx
// 尺码选择
<select onChange={(e) => handleProductType({ type: "size", value: e.target.value })}>

// 颜色点击
<div onClick={() => handleProductType({ type: "color", value: color })}>

// 加入购物车按钮
<button onClick={handleAddToCart}>  </button>
```

 ## 在刷新页面时候，购物车数据有个从0到2的过程
 persist 是什么？
Zustand 的 persist 中间件可以将 store 的状态自动保存到 localStorage（或 sessionStorage），并在页面刷新后自动恢复。
但这个“恢复”是异步的 —— 初始时 store 是空的（比如 cart: []），稍后才从 localStorage 读取真实数据并更新状态。

 👉 为避免这种 UI 闪烁（flash of empty state），我们引入一个标志位 hasHydrated：
初始：hasHydrated = false
一旦 persist 完成数据恢复 → 设为 true
组件可以根据 hasHydrated 决定是否显示 loading 或真实内容